环境介绍
名称 | 版本 |
---|---|
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
的每一个子项里面无需用的数据使用"-"
进行填充