vue-echarts使用总结

环境介绍

名称	版本
vue	2.6.10
@vue/cli	4.0.5
vue-echarts	4.0.4

使用

引入vue-echarts相应的模块：
例如：

import ECharts from "vue-echarts";
import "echarts/lib/chart/line";
import "echarts/lib/chart/scatter";
import "echarts/lib/chart/effectScatter";
import "echarts/map/js/world";
import "echarts/lib/component/legend";

 components: {
   "v-chart": ECharts
 }

一些配置的总结

图的边距问题

配置项grid:

• 参考手册

默认值：

grid: {// 修改内边距
   left: "10%",
   right: "10%",
   top: 60,
   bottom: 60
},

工具箱

配置项toolbox:

默认值：

toolbox: {
 feature: {
   dataZoom: {
     yAxisIndex: "none"
   },
   restore: {},
   saveAsImage: {}
 }
},

折线图分段不同颜色

部分配置如下：

const option = {
    xAxis: {
        name: "时间/s",
        nameLocation: "end",
        nameGap: XnameGap,
        type: "category",
        boundaryGap: false,
        interval: 100,
        minInterval: 1,
        axisLabel: {
            formatter: function (value: any, index: any) {
                return Number(value);
            },
            fontSize: 18
        },
        axisLine: {
            onZero: false
        },
        data: allTime
    },
    yAxis: {
        name: "幅值/g",
        nameLocation: "middle",
        nameGap: YnameGap,
        type: "value",
        // min: -60,
        // max: 60,
        max: function (value: { max: number; }) {
            return value.max * 1.2;
        },
        axisLabel: {
            fontSize: 18
        },
        boundaryGap: [0, "100%"]
    },
    dataZoom: [{
        type: "inside",
        start: 0,
        end: 100
    }, {
        start: 0,
        end: 10,
        handleIcon: "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
        handleSize: "80%",
        handleStyle: {
            color: "#fff",
            shadowBlur: 3,
            shadowColor: "rgba(0, 0, 0, 0.6)",
            shadowOffsetX: 2,
            shadowOffsetY: 2
        }
    }],
    textStyle: {
        fontSize: 20
    },
    series: [
        {
            id: "b",
            type: "line",
            symbol: "circle",
            smooth: false,
            symbolSize: 7,
            itemStyle: {
                normal: {
                    color: "#0000FF",
                    lineStyle: {
                        color: "#0000FF"
                    }
                }
            },
            data: paragraph1.wave.concat(Array(paragraph2.time.length + paragraph3.time.length).fill("-"))
        },
        {
            id: "bbb4",
            type: "line",
            symbol: "circle",
            smooth: false,
            symbolSize: 7,
            itemStyle: {
                normal: {
                    color: "#FF0000",
                    lineStyle: {
                        color: "#FF0000"
                    }
                }
            },
            data: Array(paragraph1.time.length).fill("-").concat(paragraph2.wave).concat(Array(paragraph3.time.length).fill("-"))
        },
        {
            id: "bbb5",
            type: "line",
            symbol: "circle",
            smooth: false,
            symbolSize: 7,
            itemStyle: {
                normal: {
                    color: "#0000FF",
                    lineStyle: {
                        color: "#0000FF"
                    }
                }
            },
            data: Array(paragraph2.time.length + paragraph1.time.length).fill("-").concat(paragraph3.wave)
        }
    ]
}

注意点：

• xAxis 下data的长度三个与 series 下三个子项的长度相等
• series 的每一个子项里面无需用的数据使用 "-" 进行填充

效果如下