ECharts渐变柱状图折线图备用

最新推荐文章于 2022-12-21 17:26:36 发布

永不满足的求知者

最新推荐文章于 2022-12-21 17:26:36 发布

阅读量124

点赞数

分类专栏： echarts 文章标签： echarts javascript html

本文链接：https://blog.csdn.net/qq_41154522/article/details/120485574

版权

echarts 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在这里插入图片描述

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#283b56'
      }
    }
  },
  color: ['#269eff'],
  legend: {},
  xAxis: [
    {
      data: [1,2,3,4,5,6,7,8,9],
      axisTick: {
            show: false
        },
    },
  ],
  yAxis: [
    {
      type: 'value',
      scale: true,
      name: '总投资(万元)',
      boundaryGap: [0.2, 0.2]
    },
    {
      type: 'value',
      scale: true,
      name: '长度(公里)',
      boundaryGap: [0.2, 0.2]
    }
  ],
  series: [
    {
      name: 'Dynamic Bar',
      type: 'bar',
      yAxisIndex: 1,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#76dfcb' },
          { offset: 1, color: '#4ac3d0' }
        ])
      },
      data: [11,22,33,44,55,66,44,33,22]
    },
    {
      name: 'Dynamic Line',
      type: 'line',
      symbolSize: 8,
      data:  [11,22,44,55,66,33,44,33,22]
    }
  ]
};