echars柱状图与折线相结合，并且都是渐变色

最新推荐文章于 2024-04-10 14:31:39 发布

joney_zy

最新推荐文章于 2024-04-10 14:31:39 发布

阅读量1.1k

点赞数

分类专栏： echars 插件文章标签： echarts

本文链接：https://blog.csdn.net/HL_xzf/article/details/123995954

版权

插件同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

echars

2 篇文章 0 订阅

订阅专栏

这段内容展示了如何使用ECharts库创建一个包含阴影的双轴图表，其中一个轴显示完成人数，另一个轴显示完成率。数据包括11个地市的数值，并应用了线性渐变颜色。图表设计包括自定义轴线颜色、轴标签、图例和线型样式。

摘要由CSDN通过智能技术生成

let category = [];
let lineData = [40000,  30000, 10000, 23000,  9000, 15000, 23000, 52000, 21000, 10000, 41000];
for (let i = 0; i < 11; i++) {
  category.push('地市' + i);
}
// option
option = {
  backgroundColor: '#0f375f',
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['完成人数', '完成率'],
    right: '1%',
    textStyle: {
      color: '#ccc'
    }
  },
  xAxis: {
    data: category,
    axisLine: {
      lineStyle: {
        color: '#ccc'
      }
    }
  },
  yAxis: [
    {
      type: 'value',
      name: '完成人数',
      position: 'left',
      splitLine: { show: false },
      // alignTicks: true,
      axisLine: {
        // show: true,
        lineStyle: {
          color: '#ccc'
        }
      },
      axisLabel: {
        formatter: '{value} '
        // formatter: '{value} 人'
      }
    },
    {
      type: 'value',
      name: '完成率',
      position: 'right',
      splitLine: { show: false },
      // alignTicks: true,
      axisLine: {
        // show: true,
        lineStyle: {
          color: '#fff'
        }
      },
      axisLabel: {
        formatter: function (value, index) {
          var nummax = 1;
          for(var i = 0;i<lineData.length;i++){
            if(nummax < value){
              nummax = lineData[i];
            }else{
              nummax = nummax;
            }
          }
          return new Number(value/60000).toFixed(2)*100 + '%';
        }
      }
    }
  ],
  series: [
    {
      name: '完成率',
      type: 'line',
      symbol: 'none',
      smooth: 0.6,
      // smooth: true,
      showAllSymbol: true,
      // symbol: 'emptyCircle',
      symbolSize: 15,
      data: lineData,
      yAxisIndex: 0,
      lineStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#97b5f7' },
          { offset: 1, color: '#cccccc' }
        ]),
        width: 5,
      },
    },
    {
      name: '完成人数',
      type: 'bar',
      barWidth: 15,
      yAxisIndex: 1,
      itemStyle: {
        borderRadius: 10,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#6cc183' },
          // { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
          { offset: 1, color: '#00b9e9' }
        ])
      },
      data: lineData
    }
  ]
};

效果如下图所示：