<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>
echarts简单使用
原创152LvBigGrandPa ©著作权
文章标签 Data 初始化 文章分类 JavaScript 前端开发
下一篇:移除链表
-
[ECharts] - ECharts使用中国地图
ECharts使用中国地图
ECharts使用中国地图 -
grafana echarts使用 echarts graph symbol
昨天突然想起上学时玩的文曲星(电子词典),里面有个猜数字的小游戏,于是拿 ECharts 试着做了一下,大体思路如下:用基于直角坐标系上的 heatmap 做虚拟按键用 graphic.elements[i]-text 和 graphic.elements[i]-rect 做文本框、提示框监听 heatmap 的点击事件,输入数字、猜数heatmap 虚拟按键实现heatmap 数据
grafana echarts使用 echarts symbol 回调函数 echarts symbol回调函数 echarts title位置