前端 - echarts 配置项？

Question

请教echarts像这种有虚线的柱状图该怎么配置，翻阅了资料也没有达到这个效果

Answer 1

可以使用柱状图的barGap属性实现
具体实现效果：

代码如下：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      barWidth: '60%',
      label: {
        show: true,
        position: "top",
      },
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.1)'
      }
    },
    {
      show: true,
      type: "bar",
      barWidth: '63%',
      barGap: "-103%",
      itemStyle: {
        borderColor:"#666",
        borderWidth:1,
        borderType: 'dashed',
        color: 'none',
      },
      z: -12,
      max: 1,
      label: {
        show: true,
        position: "top",
      },
      data: [220, 230, 180, 90, 120, 130, 153],
    }
  ]
};

Answer 2

写两个柱状图，第一个是只有虚线边框背景色透明的柱子，第二个是有背景色的柱子，然后通过设置barGap使两个柱子重叠在一起

Answer 3

可以通过ECharts的itemStyle属性和lineStyle属性来给柱状图添加虚线边框。：
option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'bar', itemStyle: { borderWidth: 1, borderColor: 'dashed', // 边框虚线颜色 barBorderRadius: [5, 5, 0, 0], // 圆角 }, lineStyle: { type: 'dashed' // 边框虚线样式类型 } }] };