echarts中部分功能實現

1.vue中echarts渲染的速度很慢，建議在加載的過程中加入loading加載。

2.給echarts添加標記線（如平均線）、標記點（如最大值、最小值）

series: [
          {
            data: [0, 5, 120, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            //標記點
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            //平均線
            markLine: {
              data: [
                {
                  type: "average",
                  name: "平均值",
                  lineStyle: {
                    height: 2
                  }
                }
              ]
            }
          }
        ],

效果如下：

3.echarts圖形月四周的距離：

series:[], 
grid: {
   x: 50,
   y: 35,
   x2: 100,
   y2: 30
 }

其中，x（和左邊的距離）、x2(和右邊的距離)、y(和頭部的距離)、y2(和底部的距離)

4.legend 關於圖例文字說明

 legend: {
   data: ["AA", "BB", "YY", "GG"]
 },

如果我不想用固定的icon，或者字體顏色，如何自定義自己的legend呢?

legend: {
        textStyle: {
            //文字的顏色
            color: '#0f0'
 
        }, 
        //圖標形狀
        icon:'triangle',
        //icon的寬度
        itemWidth:10,
        //icon的高度
        itemHeight:10,
 
    }

5.關於工具toolbox

toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: "none"
            },
            restore: {},
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            mark: { show: true },
            saveAsImage: { show: true }
          },
          //距離圖形左側
          left: "80%"
},

 

 

6.關於折線圖和柱狀圖多個不同的類型，在series並列寫入幾個：

 series: [
          {
            name: "AA",
            type: "bar",
            stack: "廣告",
            data: [
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              120,
              150,
              210,
              106,
              97,
              142,
              78
            ]
          },
          {
            name: "BB",
            type: "bar",
            stack: "電影",
            data: [
              220,
              182,
              191,
              234,
              290,
              330,
              310,
              120,
              132,
              101,
              134,
              90,
              230,
              210
            ]
          }
       ]

7.設置不同顏色：

 myChart1.setOption({
    color: ["#BB0000", "#006666", "#FFCC00", "#FF6600"],
});

總結：

1. 有需要的去官方查，Echarts 實例 、Echarts 文檔
2. 以官方的爲準，個人的僅做參考！