Konfigurationselemente für Echarts-Liniendiagramme
Da in der Arbeit so viele Diagramme angetroffen werden, kann ich mich nicht jedes Mal an die Konfigurationselemente erinnern, wenn ich sie verwende. Ich zeichne sie hier auf und hoffe, dass sie Ihnen, die vorbeikommen, helfen können. Zu unserem obigen Bild gibt es nicht viel zu sagen:
Das linke ist der Designentwurf und das rechte ist das Beispielbild von Echarts. Lassen Sie uns zuerst den Unterschied finden. Der Ort, der neu konfiguriert werden muss, ist zuerst das Symbol der Legende oben und der Text muss geändert werden, und dann muss die Beschriftung auf der Aufgrund meiner Anforderungen muss es dynamisch gemacht werden. Zum Code gibt es nicht viel zu sagen. Ich habe alle Konfigurationselemente in den Code geschrieben. Hinweise:
<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>
Verwenden Sie dann nach dem Importieren der Komponentenregistrierung die zu verwendende Seite!
//id随便给就行，只要不重复就行，series通过接口拿到数据后，处理成echarts图表所需要的数据格式
<line-chart :id=“linecharts” :series="series"></line-chart>
Hier haben wir die Konfiguration des Liniendiagramms abgeschlossen und zeichnen dann weitere Dinge zum Liniendiagramm auf:
*1, wenn wir das Diagramm manchmal während der Entwicklung direkt löschen müssen, können wir diese Methode verwenden
this.myChart.dispose();
2. Wenn die vom Backend zurückgegebenen Daten unvollständig sind, zum Beispiel unsere X-Achse 13 Skalen hat und das zurückgegebene Array nur 10 ist, müssen wir Echarts mitteilen, welchem Skalenwert sie für jeden Wert entsprechen. Zu diesem Zeitpunkt , wir können es so konfigurieren
series：[
{
name:'图一',//每一项数据的名字，与legend关联
data: [ [ 2022.01.01 , 88],[ 2022.01.02 , 89],[ 2022.01.03 , 90] ],//数组里面还是数组，第一项是指定的X轴刻度，第二个是具体的值
type: 'line',//类型为线型
connectNulls: true//由于我们数据缺失，数据点就断开了，线就断了，这个属性就是即使断了让他们连接起来。
}
]
3. Bei der Entwicklung stellen wir häufig fest, dass der Bereich unterhalb der gestrichelten Linie einen Verlaufseffekt haben muss. Um diese Konfiguration aufzuzeichnen, müssen wir eine spezielle Methode von echarts this.$echarts.graphic.LinearGradient verwenden
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, hier möchte ich nur alles über das Liniendiagramm aufzeichnen. Ich danke Ihnen jedes Mal, wenn Sie mich in Form von Code treffen. Das Teilen wird unsere Zukunft immer besser machen.