<template>
<div>
<div class="container">
<div id="echart"></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
// 页面初始化挂载dom
mounted() {
this.getLoadEcharts();
},
methods: {
getLoadEcharts() {
var myChart = this.$echarts.init(
document.getElementById("echart")
);
var colorList = ["#4FE894", "#EF0C27", "#FEE7EA"];
var listData = [
{ name: "不明", value: 20 },
{ name: "已判明", value: 20 },
{ name: "未发现", value: 20 }
];
var option = {
color: colorList,
title: {
x: "center",
y: "center",
textStyle: {
color: "#000",
fontSize: 20
}
},
legend: {
orient: "vertical",
bottom: 5,
align: "right",
right: 15,
textStyle: {
color: "#000",
fontSize: 20
},
selectedMode: false,
data: ["元素1", "元素2", "元素3"]
},
tooltip: {
trigger: "item"
},
series: [
{
type: "pie",
center: ['50%', '50%'],
radius: ['55%', '35%'],
itemStyle: {
normal: {
color: function(params) {
return colorList[params.dataIndex];
}
}
},
label: {
show: true,
fontSize: 10,
color: "#000",
formatter: function(data) {
return data.name + ":" + data.percent.toFixed(0) + "%";
}
},
labelLine: {
normal: {
length: 15,
length2: 15,
lineStyle: {
width: 2
}
}
},
data: listData
}
]
};
myChart.setOption(option);
}
}
};
</script>
<style scoped>
.container{
width: 300px;
height: 300px;
margin-left: 30px;
}
#echart{
width: 100%;
height: 100%;
}
</style>
vue使用echarts画图
原创178lvBigGrandPa ©著作权
文章标签 Data 初始化 文章分类 JavaScript 前端开发
-
Android Webview内嵌HTML使用Echarts画图并动态传值
Android Webview内嵌HTML使用Echarts画图并动态传值
Android Webview html echarts 动态传值 -
Echarts:Vue3中使用Echarts
Echarts:Vue3中使用Echarts
初始化 全局变量 其他 -
vue-echarts在vue中的使用
vue-echarts在vue项目中的引用与使用
vue 工具教程 项目工程脚手架 echarts 图例 -
vue使用Echarts图表
vue使用Echarts图表 童话
坐标轴 数据 折线 折线图 html -
Vue中使用echartshtml