最近发现公司使用echart绘制图表特别多,作为小白的我一开始并不会,后来通过学习大佬的代码,渐渐学会了基本的使用,在这里仅向新手小白分享一下,作为入门。大佬勿喷,有错误的地方还请指正。废话不多说直接开始上代码。
1.首先我们要知道ehcart是基于canvas画布的。至于没有canvas基础的,可以先上网查查他是干啥的,简单来说就是HTML中的一种绘图工具。至于echart能绘什么图,可以直接百度echart去官网查看,我常用的就是绘折线图,柱状图,饼状图等等。
2.首先在vue项目中引入echart。在终端中运行 npm install echarts --save 在main.js加入代码引入echarts,我这里是将其挂载在vue的原型上面,当然你也可以按需引入。
import echarts from "echarts";
Vue.prototype.$echarts = echarts;
3.在你需要使用到echart的地方准备一个盒子。并给一个id方便我们后续操作这个DOM节点,这里推荐使用另一种方法即vue的ref属性来操作DOM节点,使用方法跟id大同小异。
<div id="WaterAndFlow_charts" class="line-charts"></div>
4.写一个函数来操作DOM节点。
playCharts() {
let option = {
tooltip: {
trigger: "axis"
},
legend: {
data: ["水位", "流量"],
icon: "rect",
itemWidth: 20, // 设置宽度
itemHeight: 12, // 设置高度
right: "3%",
top: "5%",
textStyle: { color: "white" }
},
grid: {
left: "4%",
right: "4%",
bottom: "10%",
containLabel: true
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["2-3", "2-4", "2-5", "2-6", "2-7", "2-8", "2-9"],
axisLine: {
lineStyle: {
color: "white"
}
}
},
yAxis: [
{
name: "m³/s",
type: "value",
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: "white"
}
}
},
{
type: "value",
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: "white"
}
}
}
],
dataZoom: [
{
type: "slider",
show: true,
height: 15,
bottom: 5,
start: 10,
end: 90 //初始化滚动条
}
],
series: [
{
name: "水位",
type: "line",
stack: "总量",
color: ["#FF7F0B"],
yAxisIndex: 1,
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: "流量",
type: "line",
stack: "总量",
color: ["#0BCF95"],
yAxisIndex: 0,
data: [220, 182, 191, 234, 290, 330, 310]
}
]
};
let myChart = this.$echarts.init(
document.getElementById("WaterAndFlow_charts")
);
// 绘制图表
myChart.setOption(option, true);
window.addEventListener("resize", () => {
myChart.resize();
});
},
这段代码有点长,中间的option大家都可以先不看,这是配置echart图表的一些参数,我们的目的是交会小白如何使用echart,
let myChart = this.$echarts.init(
document.getElementById("WaterAndFlow_charts")
);
这两行代码,获取到我们为echart准备的DOM节点,并进行初始化,
myChart.setOption(option, true);
在这里开始绘制图表,option就是我们绘图需要传入的参数,以及一些配置项,例如我们需要划一个折线图,那我们就至少就需要传入X,Y轴的坐标数组。我们利用echart绘图,主要的关注部分也就是option部分,这里网上的讲解很多,大家可以根据需求上网查询相关资料。
window.addEventListener("resize", () => {
myChart.resize();
});
这一部分代码不是绘制echart图必须的,但是我认为非常重要,添加事件监听,当页面尺寸变化时,例如缩放,重新去调整echart图的尺寸比例。
再讲一下如果使用ref属性来操作DOM节点,应该怎么修改。
<div ref="WaterAndFlow_charts" class="line-charts"></div>
let myChart = this.$echarts.init(
this.$refs.WaterAndFlow_charts
);
其他不变
放上以上代码最终的绘图效果。