echarts部分用法

1、下载图片

(1) 使用组件下载

toolbox: {
          feature: {
            saveAsImage: {}
          }
},

(2) 外部按钮下载
echarts的canvas版本，会将图表绘制成canvas。这时候可以调用外部方法下载指定区域的canvas图片。
js

// 下载echarts图片
export function downloadEchartsImg(id) {
  let mycanvas = $("#" + id).find("canvas")[0];
  let image = mycanvas.toDataURL("image/png");
  let $a = document.createElement("a");
  $a.setAttribute("href", image);
  $a.setAttribute("download", "");
  $a.click();
}

2、标题文字垂直显示

下载插件 echarts-better
相关代码

 title: {
          text: echartsObj.nameStr,
          textStyle: {
            fontSize: 14,
            fontWeight: "normal",
            fontFamily: "SongTi",
          },
          textAlign: "left",
          top: "60%",
          rotate: 90,
        },

3、设置外部边框

grid: {
          show: true,
          borderColor: "#000",
          borderWidth: 2,
          width: "80%",
          left: "7%",
    },

4、内部网格线显示、隐藏

xAxis: {
    splitLine: {
            show: true | false,
    },
}

5、轴文本、轴刻度标在图内测、外侧显示

xAxis: {
    axisLabel: {
        inside: false,
    },
    axisTick: {
        inside: true,
    }
}

6、dataZoom

dataZoom: [
          {
            type: "slider",
            xAxisIndex: 0,
            filterMode: "empty",
          },
          {
            type: "slider",
            yAxisIndex: 0,
            filterMode: "empty",
          },
          {
            type: "inside",
            xAxisIndex: 0,
            filterMode: "empty",
          },
          {
            type: "inside",
            yAxisIndex: 0,
            filterMode: "empty",
          },
        ],

7、联动

可保证axisPointer、dataZoom等联动

var dom1 = echarts.init(document.getElementById("container3"));
                var options1 = this.getChartsOptions();
                dom1.setOption(options1, true);
                var dom2 = echarts.init(document.getElementById("charts1"));
                var options2 = this.getChartsOptions();
                dom2.setOption(options2, true);
                var dom3 = echarts.init(document.getElementById("charts2"));
                var options3 = this.getChartsOptions();
                dom3.setOption(options3, true);
                // 联动
                echarts.connect([dom1, dom2, dom3])

###8、多图在单个canvas绘制时的联动情况

var arr = new Array(waveData.length + 2).fill(1).map(function (item, index) {
            return index;
        });

dataZoom: [
                {
                    type: 'inside',
                    disabled: true,
                    start: 0,
                    end: 100
                },
                {
                    show: false,
                    xAxisIndex: arr,
                    type: 'slider',
                    top: 0,
                    start: 0,
                    end: 100
                }
            ],
axisPointer: {
                link: {
                    xAxisIndex: arr
                },
                show: true,
                type: 'line',
                axis: 'x',
                snap: true,
                label: {
                    show: false
                }
            }