echarts 全局定义安装
安装命令
npm install echarts -S
main.js 文件代码
import Echarts from 'echarts';
Vue.prototype.$echarts = Echarts;
Vue.use(Echarts);
<template>
<div id="main"></div>
</template>
<script>
export default {
data() {
return {};
},
mounted() {
this.$nextTick(() => {
var myChart = this.$echarts.init(document.getElementById("main"));
var option;
option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
series: [
{
type: "gauge",
// 控制表盘大小
radius: "75%",
startAngle: 315, //开始角度
// endAngle: -20, //结束角度
axisLine: {
// 控制表格展开范围
show: false,
// lineStyle: {
// width: 5,
// opacity: 0,
// },
},
title: { show: true },
// 当前展示数值
detail: { show: true },
// 整数刻度指示
splitLine: { show: true },
axisTick: {
// 刻度格到中心的长度
length: 10,
// 刻度格之间的距离
splitNumber: 5,
lineStyle: {
// 刻度颜色
color: "#52B8DF",
// 刻度宽度
width: 3,
},
},
// 刻度数值显示
axisLabel: { show: true },
// 表针显示
pointer: { show: true },
data: [
{
value: 100,
name: "test gauge",
},
],
},
],
};
option && myChart.setOption(option);
});
},
};
</script>
<style scoped lang="scss">
#main {
height: 20rem;
width: 100%;
}
</style>