前言:
好看的圆角环形图
实现效果:
实现方法:
1、引入echart
cnpm i --save echarts
import * as echarts from 'echarts';
2、页面上定义dom
<template>
<div id="echartLine" class="echartDiv">
折线图
</div>
</template>
3、实现具体源码:
<template>
<div id="echartLine" class="echartDiv" style="width: 100%;height: 400px;">
</div>
</template>
<script>
import * as echarts from 'echarts';
import { onMounted,nextTick } from 'vue';
export default {
setup(){
const echartInit = () =>{;
var myChart = echarts.init(document.getElementById('echartLine'));
// 指定图表的配置项和数据
let option = {
tooltip: {
trigger: 'item'
},
series: [
{
name: '西安',
type: 'pie',
radius: ['55%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 30,
borderColor: '#fff',
borderWidth: 15
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
data: [
{ value: 1048, name: '大盘鸡' },
{ value: 735, name: '红油米线' },
{ value: 580, name: '淳化活络' },
{ value: 484, name: '肉夹馍' },
{ value: 300, name: '牛肉面' }
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
//挂载
onMounted(()=>{
nextTick(()=>{
echartInit()
})
})
return {
};
}
}
</script>