echarts line chart configuration items
Since there are so many charts encountered in the work, I can’t remember the configuration items every time I use them. I record them here, and I hope they can also help you passing by. Not much to say about our above picture:
The one on the left is the design draft, and the one on the right is the sample image of echarts. Let’s find the difference first. The place that needs to be reconfigured is first the icon of the legend on the top, and the text must be changed, and then the label on the X axis needs to filter and change lines. The style of the point on the polyline, the scale value interval of the Y-axis does not start from 0, because the number of polylines is uncertain due to my needs, it needs to be made dynamic, not much to say about the code, I have written all the configuration items in the code Notes:
<template>
<div :ref="id" class="right"></div>
</template>
//以下是封装的折线图组件的js代码，只需要传入ref值和处理好格式series数组值就行
<script>
props: {
//传进来用来绑定ref的唯一值
id: {
type: String,
},
//传进来的数据
series: {
type: Array,
default() {
return [];
},
},
},
methods: {
initAirtrends: function (id) {
//这里就不多说，上篇文章有细说
if (!document.getElementById('airtrends')) return;
this.myChart = this.$echarts.init(this.$refs[id]);
this.myChart.clear()
this.setairtrendsoption();
window.addEventListener("resize", () => {
if (this.myChart) {
this.myChart.resize();
}
});
},
setairtrendsoption() {
let option = {
legend: {
//顶部每条折线的标识的配置项
icon: "circle", // 改变它的icon circle，rect ，roundRect，triangle
itemWidth:8, // 设置它的宽度
itemHeight:8, // 设置它的高度
itemGap:20, // 设置它的间距
// orient: 'vertical', //vertical是竖着显示 ，默认是横着
// left: '70%', //距离左边70%，也可用left,center,right
y: '1%', //距离顶部的距离，也可以用center
// textStyle:{ //icon后面的文字设置
// fontSize: 18,//字体大小
// color: '#ffffff'//字体颜色
// }
},
xAxis: {
//X轴配置项
type: 'category',
data: this.xAxislist,//由于X轴也是动态的，我做了处理，看你需求，一般是写死的
boundaryGap: false,//数据点从边缘开始
axisLine: {
show:false,//不显示坐标轴线
},
axisTick:{
show:false,//不显示X轴坐标刻度
},
// axisLabel:{//X轴的label配置项，我没有用到
// formatter: value=> {
// if(this.value == 'today'){
// return text;
// }else{
// return value;
// }
// }
// }
},
grid:{
//整个图例的大小，四个方向距离容器的距离，也可以用上下左右配置百分比
x:30,
x2:20,
y:40,
y2:30,
//containLabel: true
},
yAxis: {
//Y轴配置项
type: 'value',
scale:true,//x轴刻度不从0开始，自动获取区间
//min:50,//设置最小区间，也可以设置max，如果设置了上面的scale就不生效了
},
series:this.series,//这是决定有几条线的数据，处理成你要的数据格式，也可以写死，那就是下面的写法
// [
// {
// name:'图一',//每一项数据的名字，与legend关联
// data: [150, 230, 224, 218, 135, 147, 260,110, 200, 124, 118, 235, 247, 160],//具体数据
// type: 'line',//每一个点用线连接
// },
// {
// name:'图二',
// data: [110, 200, 124, 118, 235, 247, 160,150, 230, 224, 218, 135, 147, 260],
// type: 'line'
// }
// ]
};
this.myChart.setOption(option);
},
},
watch: {
//深度监听传进来的数据，只要数据变化就刷新echarts图表
series: {
deep: true,
handler(newVal, oldValue) {
this.$nextTick(() => {
this.initQuanProgress(this.id);
});
},
},
},
<script>
Then after importing component registration into the page that needs to be used, use!
//id随便给就行，只要不重复就行，series通过接口拿到数据后，处理成echarts图表所需要的数据格式
<line-chart :id=“linecharts” :series="series"></line-chart>
Here we have finished configuring the line chart, and then record other things about the line chart:
*1, when we sometimes need to directly clear the chart during development, we can use this method
this.myChart.dispose();
2. If the data returned by the backend is incomplete, for example, our X-axis has 13 scales, and the returned array is only 10, then we need to tell echarts which scale value they correspond to for each value. At this time, we can configure it like this
series：[
{
name:'图一',//每一项数据的名字，与legend关联
data: [ [ 2022.01.01 , 88],[ 2022.01.02 , 89],[ 2022.01.03 , 90] ],//数组里面还是数组，第一项是指定的X轴刻度，第二个是具体的值
type: 'line',//类型为线型
connectNulls: true//由于我们数据缺失，数据点就断开了，线就断了，这个属性就是即使断了让他们连接起来。
}
]
3. We often encounter in the development that the area below the broken line needs to have a gradient effect. To record this configuration, we need to use a special method of echarts this.$echarts.graphic.LinearGradient
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
//折线图颜色渐变
offset: 0,
color: "rgba(216, 228, 254)",
},
{
offset: 1,
color: "rgba(254,254,254)",
},
]
),
},
Okay, here I just want to record everything about the line chart, thank you every time you meet me in the form of code, and sharing will make our future better and better.