vue eacharts多列柱状图示例

      var option6 = {   
        backgroundColor:'',
        color:["red","orange"],
        tooltip: {
          trigger: 'axis',
          axisPointer: { 
            type: 'shadow'
          }
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '16%',
          top:'16%',
          containLabel: true
        },
         legend: {
        data: ['较大风险', '重大风险'],
        right: 10,
        top:12,
        textStyle: {
            color: "#fff"
        },
        itemWidth: 12,
        itemHeight: 10,
    },
        xAxis: {
          type: 'category',
          data: [1,2,3,4,5],
          axisLine: {
            lineStyle: {
              color: 'white'
            }
          },
          axisLabel: {
            textStyle: {
              fontFamily: 'Microsoft YaHei'
            }
          },
        },
        yAxis: {
          type: 'value',
          // max:auto,
          axisLine: {
            show: false,
            lineStyle: {
              color: 'white'
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },
          axisLabel: {}
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 50,
            end: 100,
            textStyle: {
              color: '#fff'
            }
          },
          {
            type: 'inside',
            realtime: true,
            start: 50,
            end: 100,
            textStyle: {
              color: '#fff'
            }
          }
        ],
        series: [{
          name: '较大风险',
          type: 'bar',
          barWidth: '10%',
          itemStyle: {
            barBorderRadius: 3,
          },
          data:[6,4,3,2,6]
        },
        {
          name: '重大风险',
          type: 'bar',
          barWidth: '10%',
          itemStyle: {
            barBorderRadius: 3,
          },
          data: [1,3,4,5,7]
        }],
                };
      var myChart6 = echarts.init(document.getElementById('ec6'));
      myChart6.setOption(option6);

 

posted @ 2022-01-08 17:15  _Lawrence  阅读(543)  评论(0编辑  收藏  举报