| 目录 | 内容 |
|---|---|
| 2.1 formatter | 各种标签自定义显示方式 |
| 2.2 tooltip | 自定义提示框的内容 |
| 2.3 引入两个不同组件的echarts图表存在冲突 | 用ref |
| 2.4一个chart多次渲染到div中 | 销毁已经存在的实例 |
| 2.5动态的折线图 | |
| 2.6 桑基图 | |
| 2.7 液态球 | |
| 2.8 仪表盘 |
（一）基础
1.1 官网：https://echarts.apache.org/handbook/zh/basics/import
1.2 安装：npm install echarts --save
1.3 引入Echarts：
import * as echarts from 'echarts';
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
});
(二) 具体问题
2.1 formatter
image.png
image.png
2.2 tooltip
自定义提示框的内容
tooltop{
formatter(params) {
// console.log(params);
let xiaoShou = params[0].data;
let chengBen = params[1].data;
let liRun = xiaoShou - chengBen;
return `
利润 ${liRun}万元<br/>
销售额 ${xiaoShou}万元<br/>
成本 ${chengBen}万元
`;
},
}
网页上的写法记录
image.png
2.3 引入两个不同组件的echarts图表
存在冲突 因为渲染到id上 dom中只有一个id 会覆盖
所以 这里使用ref来完成
这样不会产生冲突了
image.png
2.4 一个chart多次渲染到div中 会报错
There is a chart instance already initialized on the dom
参考API：https://echarts.apache.org/zh/api.html#echarts.getInstanceByDom
这要求 我们再一次渲染chart时 需要销毁原来的实例
watch: {
//监听switch的变化，来给echarts颜色变化
switchValue: {
handler(newValue) {
// console.log("新的switchValue：", newValue);
//-------------------dom中已经有echarts实例对象 先销毁-------------------
//取得dom
let chart = this.$refs.chart;
// console.log(chart);
//判断是否已有案例
let existInstance = echarts.getInstanceByDom(chart);
// console.log(existInstance);
if (existInstance) {
if (true) {
echarts.dispose(chart);
}
}
//--------------------------清数据---------------------------------
this.barZaizhi = [];
this.ydseriesRuzhiata = [];
this.seriesLizhi = [];
this.xaxisData = [];
//再一次初始化chart图表
this.getchart(newValue);
//这个方法里面就是这样的内容
// let myChart = echarts.init(this.$refs.chart);
// myChart.setOption({})
},
},
},
2.5动态的折线图
下面的实例 是监听父组件的按钮响应 来渲染chart
- 步骤
(1) 在data return 中 初始化 图表
(2) 得到指令 init ：echarts
(3) 在计时器中 间隔时间 获取数据
(4) 每次获取的数据 都给到 data中初始化图表中的对应的data数据
this.echartsOption.series[0].data = this.ydata;
<template>
<!-- 动态图表 实现 -->
<div v-loading="loading" style="width: 100%; height: 100%">
<div style="width: 100%; height: 100%" ref="chart"></div>
</div>
</template>
<script>
import axios from "axios";
import * as echarts from "echarts";
export default {
name: "ScadaChart",
data() {
return {
loading: false,
xdata: [],
ydata: [],
// ----------------------------步骤1、折线图 echarts 初始化----------------------------
echartsOption: {
grid: {
top: "10%",
left: "3%",
right: "3%",
bottom: "7%",
containLabel: true,
},
xAxis: {
type: "category",
data: this.xdata,
name: "时间",
nameLocation: "end",
axisLabel: {
formatter: (value) => {
// console.log(value, index);
let value1 = value.substring(0, 10);
let value2 = value.substring(11, 19);
// console.log(value1, value2);
return `${value1}\n${value2}`;
},
},
},
yAxis: {
type: "value",
name: "车速",
nameLocation: "end",
},
series: [
{
data: this.ydata,
type: "line",
symbol: "none",
},
],
tooltip: {
show: true,
trigger: "axis",
},
},
};
},
props: {
btn: Boolean,
formheader: {
type: Object,
},
},
watch: {
//监听 btn的变化 点击按钮 更新chart
btn: {
handler() {
this.loading = true;
//------------------- dom中已经有echarts实例对象 先销毁 -------------------
//取得dom
let chart = this.$refs.chart;
// console.log(chart);
//判断是否已有案例
let existInstance = echarts.getInstanceByDom(chart);
// console.log(existInstance);
if (existInstance) {
if (true) {
echarts.dispose(chart);
}
}
// this.getchart();
// -----------------------------步骤2、监听到按钮 开始echarts渲染------------------------
this.myChart = echarts.init(this.$refs.chart);
this.myChart.setOption(this.echartsOption);
setInterval(() => {
this.getdata();
}, 10000);
},
},
},
methods: {
//-----------------------------步骤3、获取数据-----------------------------
getdata() {
let url = "http://36.26.85.213:8086/api/v2/query?org=th";
let headers = {
Authorization:
"Token Z4s5lPSdXHs_zueTttAvcNQS9KyidZ-c4yOtiBaJltklkJWMk9EDla90idvh8kKkDp7eVIrRFoM5ByWB9AhFVA==",
"Content-Type": "application/vnd.flux",
};
let data =
'from(bucket: "tianheng")\n' +
"|> range(start: -1h)\n" +
// '|> filter(fn: (r) => r["_measurement"] == "sizing_10000012")\n' +
'|> filter(fn: (r) => r["_measurement"] == ' +
'"' +
this.formheader.measurement +
'"' +
")\n" +
'|> filter(fn: (r) => r["machine_id"] == ' +
'"' +
this.formheader.machine_id +
'"' +
")\n" +
'|> filter(fn: (r) => r["_field"] == "current_speed")\n' +
// "|> limit(n: 100)\n" +
"|> timeShift(duration: 8h)\n";
axios({
url: url,
method: "post",
headers: headers,
data: data,
}).then((res) => {
// console.log(res.data);
// console.log(res.data.split(","));
let data = res.data.split(",");
//--------------------1、得到速度数据-------------------------------
let value = data.indexOf("_value"); //找到value第一个位置 接下来每个数据+9
let values = [];
//1000 是 10 乘上 自己限制的数据长度
//如果长度不限制 长度直接是data的长度
for (let i = value + 9; i < data.length; i += 9) {
// console.log(data[i]);
// 返回的数据可能没有100条 所以需要过滤
if (data[i] != undefined) {
values.push(data[i]);
}
}
// console.log("_value", values);
this.ydata = values;
//--------------------2、得到时间数据 --------------------------------
let time = data.indexOf("_time"); //找到time第一个位置 接下来每个数据+9
let times = [];
for (let i = time + 9; i < data.length; i += 9) {
// console.log(data[i]);
// 返回的数据可能没有100条 所以需要过滤
if (data[i] != undefined) {
times.push(data[i]);
}
}
// console.log("_time", times);
this.xdata = times;
// ---------------------步骤4、重新将数组赋值给echarts选项----------------
this.echartsOption.xAxis.data = this.xdata;
this.echartsOption.series[0].data = this.ydata;
this.myChart.setOption(this.echartsOption);
this.loading = false;
});
},
},
};
</script>
<style scoped>
</style>
2.6 桑基图
注意： 因为是动态的通过接口 得到数据 ，所以需要 将data links 在data中赋值
注意 ：data links 中的字段名字是要一样的
option = {
series: {
type: 'sankey',
layout: 'none',
emphasis: {
focus: 'adjacency'
},
//data:this.data
data: [{
name: 'a'
}, {
name: 'b'
}, {
name: 'a1'
}, {
name: 'a2'
}, {
name: 'b1'
}, {
name: 'c'
}],
// links:this.links
links: [{
source: 'a',
target: 'a1',
value: 5
}, {
source: 'a',
target: 'a2',
value: 3
}, {
source: 'b',
target: 'b1',
value: 8
}, {
source: 'a',
target: 'b1',
value: 3
}, {
source: 'b1',
target: 'a1',
value: 1
}, {
source: 'b1',
target: 'c',
value: 2
}]
}
};
2.7 液态球
image.png
- 报错 是因为
echatrs和echarts-liquidfill版本的原因- 解决 echart@4.9.0 echarts-liquidfill@2.0.6
- 解决 echart@4.2.1 echarts-liquidfill@2.0.6
import echarts from "echarts";
import "echarts-liquidfill";
// npm install echarts-liquidfill
一个页面有多个chart 的配置方法
<div
class="content-item-content-right-chart"
:id="waveId(index)"
></div>
waveId(i) {
let waveid = "waveChart" + i;
return waveid;
},
initWave(i, v) {
let color = [v >= this.peiZhi.xiaolvMin ? "#23b899" : "#ff0000"];
let bgcolor = [
v >= this.peiZhi.xiaolvMin
? "rgba(35, 184, 153,0.2)"
: "rgb(255, 0, 0,0.2)",
];
this.chart[i] = echarts.init(document.getElementById("waveChart" + i));
this.chart[i].setOption({
series: [
{
type: "liquidFill",
//图大小
radius: "80%",
waveAnimation: true,
data: [v / 100],
color: color,
//圆圈内的背景颜色
backgroundStyle: {
color: bgcolor,
},
//圈内的文字 不要
label: {
show: false,
},
outline: {
show: true,
borderDistance: 2,
itemStyle: {
borderWidth: 2,
borderColor: color,
shadowBlur: 8,
shadowColor: color,
},
},
},
],
});
},
2.8 仪表盘 进度条
问题 ：
echarts的版本 会影响仪表盘的样式，进度条这个样式就会出不来
解决：
1.echarts 高版本 直接可以用官方的代码。
2.echarts 低版本 主要是 axisLine lineStyle color中的设置
//低版本
this.chart[i].setOption({
backgroundColor: "#fff",
series: [
{
type: "gauge",
center: ["50%", "80%"],
clockwise: true, //刻度是否顺时针增长
startAngle: 180, //指针开始0的位置
endAngle: 0, //指针结束位置
min: 0,
max: speedMax,
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
splitNumber: 10,
radius: "125%", //大小
pointer: {
//指针
show: true,
width: 2,
showAbove: true,
length: "70%",
},
itemStyle: {
//仪表盘指针样式
color: color,
shadowColor: color,
shadowBlur: 4,
shadowOffsetX: 2,
shadowOffsetY: 2,
},
axisLine: {
//仪表盘轴线样式
show: true,
roundCap: true,
lineStyle: {
width: 8,
color: [
[v / speedMax, color],
[1, "#e6ebf8"],
],
},
},
progress: {
show: true,
width: 6,
// overlap: false, //多组数据 是否重叠
// roundCap: true, //是否在两端显示成圆形
itemStyle: {
color: color,
},
},
axisTick: {
//刻度样式
show: false, //
// distance: 130,
splitNumber: 1, //分隔线之间分割的刻度数
length: 3,
lineStyle: {
width: 3,
color: color,
type: "solid",
cap: "round",
},
},
splitLine: {
//分隔线样式
show: false, //
distance: 0, //离轴线的距离
length: 2,
lineStyle: {
width: 2,
color: color,
type: "solid",
},
},
axisLabel: {
show: false,
},
title: {
show: false,
},
detail: {
show: false,
},
data: [
{
value: v,
name: "车速",
},
],
},
],
});
