这样单独放在一个js文件里 然后在组件引入 报错 查找不到, 里面的数据从后台服务器拿到数据后怎么给到option对应的数据里,所有的数据都是动态的
export const option = {
title: [
{
text: "车辆状态"
},
{
text: total.value,
left: "30%",
top: "46%",
textAlign: "center",
textBaseline: "middle",
textStyle: {
color: "#8483EF",
fontWeight: "normal",
fontSize: 42
}
},
{
text: total.name,
left: "30%",
top: "55%",
textAlign: "center",
textBaseline: "middle",
textStyle: {
color: "#999",
fontWeight: "normal",
fontSize: 20
}
}],
tooltip: {
trigger: "item",
formatter: "{b}",
backgroundColor: "rgba(0,0,0,0.7)", // 背景
padding: [8, 10] //内边距},
legend: {
orient: "",
icon: "circle",
right: 100,
top: "center",
itemGap: 18,
textStyle: {
color: "#666",
fontSize: 16
},
// formatter: function (series) {
// return series[0].data[0].value
// },
data: data_name},
// graphic: {
// type: "text",
// left: "22%", // 相对父元素居中
// top: "middle", // 相对父元素居中
// padding: [10, 10],
// style: {
// fill: "#777",
// textAlign: "center",
// text: [" 2,000n 车辆总数"],
// font: "30px Microsoft YaHei"
// }
// },
series: [
{
type: "pie",
radius: [146, 160],
center: ["30%", "50%"],
color: "blue",
hoverAnimation: false,
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: "center"
},
formatter: `{value} 辆`
},
data: originalData
// data: [
// {
// value: 150,
// name: "置业中",
// itemStyle: {
// color: "blue"
// }
// },
// {
// value: 150,
// name: "作业中",
// itemStyle: {
// color: "pink"
// }
// },
// {
// value: 150,
// name: "已报废",
// itemStyle: {
// color: "purple"
// }
// },
// {
// value: 150,
// name: "维修中",
// itemStyle: {
// color: "hotpink"
// }
// },
// {
// value: 150,
// name: "超载中",
// itemStyle: {
// color: "skyblue"
// }
// },
// {
// value: 1000,
// name: "请假中",
// itemStyle: {
// color: "lightgreen"
// }
// }
// ]
}]
}
在Vue中，如果你想要异步加载数据，你可以使用Vue的 $nextTick 和 $emit。以下是一个例子：
首先，你需要在你的Vue组件中引入Echarts库：
```html
```
然后，你可以使用$nextTick来更新图表的数据显示：
```javascript import echarts from 'echarts';
this.$nextTick(function () { // 异步加载数据 let data = [ { name: '数据1', value: 10 }, { name: '数据2', value: 20 }, { name: '数据3', value: 30 } ];
// 创建ECharts实例
let myChart = echarts.init(document.getElementById('main'));
// 数据绑定
myChart.setOption({
series: [{
name: '数据',
type: 'bar',
data: data.map(item => item.value)
}]
});
// 在数据加载完成后更新图表
myChart.$nextTick();
}); ```
在这个例子中，我们在$nextTick函数中异步加载了数据，然后在数据加载完成后更新了图表。注意，你需要确保你的数据在$nextTick函数被调用之前已经加载完成。
