Echarts柱形图与条形图自定义样式

huanBiDataFun1() {
      const huanBiData1 = echarts.init(document.getElementById('huanBiData1'))

      huanBiData1.setOption({
        color: ['#5697FD', '#FD1919'],
        title: {
          text: '环比数据',
          left: 'left',
          textStyle: { 'fontSize': 14, 'fontWeight': '500', 'color': '#0E1313' }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        legend: {
          data: ['空气质量指数', '环比增长率'],
          right: 50,
          top: 25,
          icon: 'rect', // 形状  类型包括 circle,rect,line,roundRect,triangle,diamond,pin,arrow,none
          itemWidth: 20, // 设置宽度
          itemHeight: 9, // 设置高度
          itemGap: 20 // 设置间距
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            // name: '水量',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: '{value} ml'
            }
          },
          {
            type: 'value',
            // name: '温度',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '空气质量指数',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
          },
          {
            name: '环比增长率',
            type: 'line',
            // yAxisIndex: 1,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          }
        ]
      })
      setTimeout(() => {
        window.addEventListener('resize', function() {
          huanBiData1.resize()
        })
      }, 50)
    },
posted @ 2020-10-22 09:51  光影易逝  阅读(2269)  评论(0编辑  收藏  举报