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

最新推荐文章于 2024-07-22 11:21:45 发布

原创最新推荐文章于 2024-07-22 11:21:45 发布 · 216 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文详细介绍了如何使用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,
    },
  ],
});