Echarts里柱状图,饼状图的一些配置说明

柱状图的一些配置说明(后期用到会更新)

myChart.setOption({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
    },
  },
  legend: {
    data: ['数据1',‘数据2’],  //每条数据有多个柱图用此,注意series里name要与	此同步
    x: 200, // 'center' | 'left' | {number},   //提示数据的位置方向
    y: 20, // 'center' | 'bottom' | {number} 
   },
  title: {
    text: "", //标题
  },
  grid: {
    borderWidth: 0,
    left: 40,  //调位置
    right: 30,
    top: 65
  },
  xAxis: [
    {
      data: this.cityNameList,
      axisTick: {
        show: false,  //去除x轴线上的小线段(边框线)
      },
      axisLine: {
        show: false, //去除x轴线(边框线)
        lineStyle: {
          color: "#3A4E64", //x轴文字颜色
        },
      },
      axisLabel: { interval: 0, rotate: 40 } //x轴线文字方向(文字太长需要)
    },
  ],
  yAxis: {
    type: "value",
    axisTick: {
      show: false,
    },
    axisLine: {
      show: true,//边框线显示不显示
      lineStyle: {
        color: "#E0E5EC",//边框线的颜色
      },
    },
    splitLine: {
      lineStyle: {
        color: '#E0E5EC'//所有横线的颜色
      }
    },
    axisLabel: { //字体颜色
      show: true,
      textStyle: {
        color: "#666", //y轴文字颜色
      },
    },
  },
  series: [
    {
      type: "bar",
      barWidth: 15, //柱图的粗细
      name: '数据1'
      showBackground: false,
      itemStyle: {  //柱图颜色渐变
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ //0 0 0 1 控制方向
          { offset: 0, color: "#83bff6" },
          { offset: 0.5, color: "#188df0" },
          { offset: 1, color: "#188df0" },
        ]),
      },
      data: this.countList,
    },
  ],
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值