echarts常用总结

1. 修改轴线颜色及更改实线

 yAxis: [
            splitLine: {
              lineStyle: {
                type: 'soild',
                color: '#799ec4',
              }
            }      
        ]

2. 是否显示刻度

 yAxis: [
               axisTick: {
                show: false
              },  
        ]

3. 饼形图去掉指示线及文字

原图

series: [{
          name: "Line 1",
          type: "pie",
          clockWise: true,
          radius: ["40%", "60%"],
          center: ["30%", "50%"],
          itemStyle: dataStyle,
          startAngle: 90,
          roundCap: 1,
            //指示线
          labelLine: {
            normal: {
              show: false
            }
          },
            //指示文字
          label: {
            normal: {
              show: false
            }
          },
          z: 9,
          data: seriesData,
        },],

效果

4. 饼形图主标题与副标题的样式与位置

let option = {
        title: [
              {
            text: "122",
            left: "22%",
            top: "40%",
            textStyle: {
              textAlign: "center",
              color: "#fff",
              fontSize: fontSize(32),
              fontWeight: 400,
            },
          },
          {
            subtext: '总数',
            left: "25%",
            top: "50%",
            subtextStyle: {
              fontSize: fontSize(12),
              fontWeight: 400,
              color: "#fff",
            },
          }
        ],
}

5. y轴name的位置

yAxis: [{
          name: "(mm)",
          nameGap: 10,
    }]

6. 柱状图柱形上面的文字

 series: [{
          type: "bar",
          data: [95, 85, 78, 75, 73, 70, 65, 50, 43],
          barWidth: "14",         
          label: {
            normal: {
              show: true,
              position: "top",
              textStyle: {
                color: "#fff",
                fontSize: fontSize(10),
              },
            },
          },
        },],

7. x轴时间数值格式化 按指定间隔排序

axisLabel: {
            formatter: function(value) {
              return value + ':' + '00'
            },
       },
interval:4

8. 设置y轴的最大值

yAxis: {
          type: "value",
          name: "（A）",
          max: function(value) {             
            return value.max + 50;
          },
    }

9. y轴文字显示整数

yAxis : {minInterval:1},

10. echarts x轴显示第一个和最后一个中间按间隔显示

option = {
    xAxis: {
        data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        axisLabel: {
            interval: 2, // 每隔2个标签显示一个
            showMinLabel: true, // 显示第一个标签
            showMaxLabel: true // 显示最后一个标签
        }
    },
    // 其他配置项
    series: [{
        // 其他配置项
    }]
};

11. 修改柱形图同一系列的两根柱子jiange

barGap 控制的是同一系列中两个相邻柱形之间的距离，默认值为 '30%'，表示柱形宽度的 30%

series: [
  {
    name: '柱形一',
    type: 'bar',
    barGap: '50%', // 两个柱形之间距离为柱形宽度的 50%
    data: [10, 20, 30, 40, 50]
  },
  {
    name: '柱形二',
    type: 'bar',
    barGap: 30, // 两个柱形之间距离为 30 像素
    data: [20, 30, 40, 50, 60]
  }
]

barCategoryGap 控制的是不同系列之间两个相邻柱形之间的距离，默认值为 '20%'，
表示柱形宽度的 20%。如果需要更大的间距，可以设置为一个大于 0 小于 1 的小数，或者是一个像素值
series: [
  {
    name: '柱形一',
    type: 'bar',
    barCategoryGap: '50%', // 不同系列之间距离为柱形宽度的 50%
    data: [10, 20, 30, 40, 50]
  },
  {
    name: '柱形二',
    type: 'bar',
    barCategoryGap: 30, // 不同系列之间距离为 30 像素
    data: [20, 30, 40, 50, 60]
  }
]

12. x轴文字超出变成...

axisLabel: {
              margin: 10,
              interval: 0,
              textStyle: {
                color: '#fff',
                fontSize: fontSize(12)
              },
              formatter: function (params) {
                var val = "";
                var show = 3;
                if (params.length > show) {
                  val = params.substr(0, show) + '...';
                  return val;
                } else {
                  return params;
                }
              }
            },

13. 折线图的tooltip 显示其他数组中的内容

  formatter: function(params) {
            let tooltipStr = ''
            params.forEach(item => {
              if (item.seriesName === 'A基点') {
                tooltipStr += `${state.licengweiyi.A.A[item.dataIndex]} : ${item.value} mm<br>`
              } else if (item.seriesName === 'B基点') {
                tooltipStr += `${state.licengweiyi.B.A[item.dataIndex]} : ${item.value} mm<br>`
              }
            })
            return tooltipStr
          }

14. 图表数据区域缩放组件

1. dataZoom 是一个数组，其中包含两个对象，分别用于定义数据区域的缩放方式。

2. 第一个对象中，type 属性为 'inside'，表示内部数据区域缩放；start 和 end 属性分别定义了数据缩放的开始和结束位置，这里的值为 0 和 100000。

3. 第二个对象中，未指定 type 属性，表示该对象用于外部数据区域缩放；start 和 end 属性同样定义了数据缩放的开始和结束位置，这里的值为 0 和 10。

dataZoom: [
            {
              type: 'inside',
              start: 0,
              end: 100000
            },
            {
              start: 0,
              end: 10
            }
          ],
//与xaixs 同级

15.柱状图添加阴影背景色

      // 为柱条添加背景色
      // 用 showBackground 开启，并且可以通过 backgroundStyle 配置。
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(220, 220, 220, 1)'
      },