因为自己遇到了所以分享下解决办法,也记一下笔记;
第一步:
1.这里首先引入Echarts组件
<template>
<div>
<Echart
:options="options"
id="centreRight2Chart1"
height="220px"
width="360px"
></Echart>
</div>
</template>
第二步:
1.这里定义两个对象 options 和 param;
2.options:Echarts配置所需的属性
3.param:用来监听的参数
export default {
data () {
return {
options: {},
param : {}
};
}}
第三步:axios请求
1.就是通过axios请求给param赋值
httpAction('/yb/bigscreen/top5','','post').then((res)=>{
let records = res.result;
if(res.code == 200 && records.length > 0){
let tmpParam = {};
records.forEach((e,i) => {
if(i == 0){
tmpParam.arr1 = [parseFloat(e.cjfy),parseFloat(e.cjwgje),parseFloat(e.cjzyr),parseFloat(e.wgfyzb),parseFloat(e.wgrczb)]
//this.param.arr1 = [1000,2000,3000,400,5000];
} else {
let arr2 = [parseFloat(e.cjfy),parseFloat(e.cjwgje),parseFloat(e.cjzyr),parseFloat(e.wgfyzb),parseFloat(e.wgrczb)];
tmpParam.max = Math.max(...tmpParam.arr1,...arr2);
tmpParam.arr2 = arr2;
}
})
this.param = tmpParam;
console.log(tmpParam)
}
});
第四步:watch函数举例
1.这里是通过对param进行监听,将newData(param通过axios更新后的值)里面的值拿出来赋值给echarts图表所需的配置数据;
2.Echarts图表需要渲染的配置数据(this.options)写在watch监听里面;
watch: {
param: {
//newData:param更新的值,oldDate:param之前的值
handler (newData, oldData) {
var legendData = ["xxx", "xxx"]; //图例
var indicator = [
{
text: "次均xxxx",
max: newData.max,
},
{
text: "次均xxxx",
max: newData.max,
},
{
text: "次均xxxx",
max: newData.max,
},
{
text: "违规xxxx",
max: newData.max,
// axisLabel: {show: true, textStyle: {fontSize: 18, color: '#333'}}
},
{
text: "违规xxxx",
max: newData.max,
},
];
var dataArr = [
{
value: newData.arr1,
name: legendData[0],
itemStyle: {
normal: {
lineStyle: {
color: "#4A99FF",
// shadowColor: '#4A99FF',
// shadowBlur: 10,
},
shadowColor: "#4A99FF",
shadowBlur: 10,
},
},
areaStyle: {
normal: {
// 单项区域填充样式
color: {
type: "linear",
x: 0, //右
y: 0, //下
x2: 1, //左
y2: 1, //上
colorStops: [
{
offset: 0,
color: "#4A99FF",
},
{
offset: 0.5,
color: "rgba(0,0,0,0)",
},
{
offset: 1,
color: "#4A99FF",
},
],
globalCoord: false,
},
opacity: 1, // 区域透明度
},
},
},
{
value: newData.arr2,
name: legendData[1],
itemStyle: {
normal: {
lineStyle: {
color: "#4BFFFC",
// shadowColor: '#4BFFFC',
// shadowBlur: 10,
},
shadowColor: "#4BFFFC",
shadowBlur: 10,
},
},
areaStyle: {
normal: {
// 单项区域填充样式
color: {
type: "linear",
x: 0, //右
y: 0, //下
x2: 1, //左
y2: 1, //上
colorStops: [
{
offset: 0,
color: "#4BFFFC",
},
{
offset: 0.5,
color: "rgba(0,0,0,0)",
},
{
offset: 1,
color: "#4BFFFC",
},
],
globalCoord: false,
},
opacity: 1, // 区域透明度
},
},
},
];
var colorArr = ["#4A99FF", "#4BFFFC"]; //颜色
this.options = {
color: colorArr,
legend: {
orient: "vertical",
icon: "circle", //图例形状
data: legendData,
bottom: 0,
right: 20,
itemWidth: 14, // 图例标记的图形宽度。[ default: 25 ]
itemHeight: 14, // 图例标记的图形高度。[ default: 14 ]
itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔,纵向布局时为纵向间隔。
textStyle: {
fontSize: 10,
color: "#00E4FF",
},
},
radar: {
// shape: 'circle',
name: {
textStyle: {
color: "#fff",
fontSize: 11,
},
},
indicator: indicator,
splitArea: {
// 坐标轴在 grid 区域中的分隔区域,默认不显示。
show: true,
areaStyle: {
// 分隔区域的样式设置。
color: ["rgba(255,255,255,0)", "rgba(255,255,255,0)"], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
},
},
axisLine: {
//指向外圈文本的分隔线样式
lineStyle: {
color: "#153269",
},
},
splitLine: {
lineStyle: {
color: "#113865", // 分隔线颜色
width: 1, // 分隔线线宽
},
},
},
series: [
{
type: "radar",
symbolSize: 8,
// symbol: 'angle',
data: dataArr,
},
],
};
},
immediate: true,
deep: true
}
}
第五步:OVER