因为自己遇到了所以分享下解决办法，也记一下笔记；
第一步：
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
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
