主要是常用图表配置意义和优化体验的代码,如:折线(面积)、柱状及环形图三种典型类型图表的配置及效果图。
一、快捷小方法
1.常用配置意义
option里的配置如果不想显示的话可以直接用false,如:xAxis: false,
let option = {
title://设置标题(不常用,做适应的时候也没有那么完美,建议放在图表外),
tooltip: //悬浮框,
legend: //图例,
grid: //图表位置,
xAxis: //X轴配置,用[{},{}],可配置两个
yAxis: //X轴配置(同上),
series: //数据, 用数组显示多条数据(如多个折线、柱状图等)
};
2.屏幕改变时图形跟着改变
//引入echarts组件
import * as echarts from "echarts";
mounted() {
this.initTpysChart();
},
methods: {
initTpysChart() {
//根据id 初始化echarts
let myChart = this.$echarts.init(document.getElementById("chart"));
let option = {......};
myChart.setOption(option, true);
//屏幕改变时调整大小
window.addEventListener("resize", () => {
myChart.resize();
});
this.$on("hook:destroyed", () => {
window.removeEventListener("resize", () => {
myChart.resize();
});
});
}
}
二、典形图表配置
1.折线图(平滑、折线、面积以及小样式)
option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
inside: true,
lineStyle: {
color: "#4ca6ff",
opacity: 0.4,
}
},
axisLine: {
lineStyle: {
color: "#4ca6ff",
opacity: 0.4,
}
},
axisLabel: {
textStyle: {
color: "#76A1CE",
fontSize: '0.75rem',
},
},
},
yAxis: {
type: 'value',
name: '(元/千瓦时)',
nameTextStyle: {
color: "#76A1CE",
fontSize: '0.75rem',
},
type: "value",
splitNumber: 3,
axisLabel: {
show: true,
interval: "auto",
formatter: "{value}",
textStyle: {
color: "#76A1CE",
fontSize: '0.75rem',
},
},
splitLine: {
lineStyle: {
color: "#4ca6ff",
opacity: 0.2,
},
},
axisTick: {
show: false, //不显示坐标轴刻度
},
//隔行变色
splitArea: {
show: true,
areaStyle: {
color: ['#4da6ff0d', 'transparent']
}
}
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
typ