1. 首页
  2. 前端

Echarts简单柱状图的参数配置

var myChart = echarts.init(document.getElementById('box'));
    var legend=['营销', '广告','视频','引擎','信息流','短视频'];
    var color=["#ffd012","#ff122e","#1287ff","#4bc336","#ff8212","#bbbbbb"];
    var dataX=['推广','渠道','媒体'];

    var dataSource=[
      { data:[80, 75, 70] },
      { data:[50, 34, 26] },
      { data:[50, 34, 26] },
      { data:[50, 34, 26] },
      { data:[50, 34, 26] },
      { data:[50, 34, 26] }
    ]


    var series=[];
    dataSource.forEach((v,i)=>{
      series.push(
        {
          name: legend[i],
          type: 'bar',
          barWidth: '26',
          itemStyle: {
            normal: {
              color:color[i],
              barBorderRadius: [3, 3, 0, 0]
            },
          },
          label: {
            normal: {
              show: true,
              position: "top",
              color: "#666",
              formatter: function(params) {
                params.value;
              }
            }
          },
          data: v.data
        }
      )
    })

    var option = {
      tooltip: {
        trigger: "axis",
        axisPointer: { 
          type: 'shadow'
        }
      },
      grid: {
        left: '4%',
        right: '4%',
        bottom: '5%',
        top:'16%',
        containLabel: true
      },
      legend: {
        data:legend ,
        right: 0,
        top:0,
        textStyle: {
          color: "#666",
          fontSize:12
        },
        itemWidth: 16,
        itemHeight: 12
      },
      xAxis: {
        type: 'category',
        data: dataX,
        axisLine: {
          lineStyle: {
            color: '#dddddd'
            
          }
        },
        axisLabel: {
          textStyle: {
            color:"#666666",
            fontSize:12,
          }
        },
        axisTick:{
         show:false
       }
     },

     yAxis:[
     {  //y轴左边的参数配置
      type: 'value',
      name: "数量",
      nameTextStyle: {
        color: "#666",
        align: "right"
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#dddddd'
        }
      },
      splitNumber:10,
      splitLine: {
        show: true,
        lineStyle: {
          color: '#dfdfdf'
        }
      },
      axisLabel: {
        textStyle:{
          color:"#666",
          fontSize:12
        }
      },
      axisTick:{
       show:false
     }
   },{ //y轴右边的参数配置
    axisLine: {
      show: true,
      lineStyle: {
        color: '#dddddd'
      }
    }
  }],
  series:series
};
myChart.setOption(option);

原创文章,作者:Ferrycoln,如若转载,请注明出处:https://ms200.cn/archives/1724

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

在线咨询:点击这里给我发消息

邮件:499661635@qq.com.com

工作时间:周一至周五,9:30-18:30

QR code