引入Echarts
npm install echarts --save
使用文件引入
<script>
const echarts = require('echarts')
</script>
html代码使用
<template>
<div>
<div id="chartContainer" :style="{width: '100%', height: '300px'}"></div>
</div>
</template>
方法映射数据显示图表
<script>
const echarts = require('echarts')
export default {
data(){
return{
// 注意映射数据格式为vaue,和name属性.
gamePlayData:[{
value:1,
name:'张三'
},{
value:2,
name:'李四'
}]
}
},
creatd(){
this.canvasjs();
},
methods:{
canvasjs(gamePlayData) {
// 特别注意此处setimeout 此处由于需要html代码全部执行完才能去映射数据因此此处使用延迟操作,同样也能使用vue生命周期(未检测是否可行)
setTimeout(() => {
const chartContainer = document.getElementById('chartContainer');
const myChart = echarts.init(chartContainer);
// 绘制图表
myChart.setOption({
// 设置整体背景颜色和单个tip层颜色,
backgroundColor: '#12cf96',
color:[
'#ed2510',
'#1076ed',
'#ed10e5',
'#070009',
'#7b0c9b',
'#ed7310',
'#090100'
],
// 图表标题和位置
title: {
text: '玩法分布',
x: 'center',
},
// 图表默认显示数据
tooltip: {
trigger: 'item',
formatter: '{b}<br/> {c},({d}%)',
},
// 设置鱼鳔类型为pie 位置 数据
series: [{
name: '访问来源',
type: 'pie',
radius: '80%',
center: ['50%', '60%'],
data: gamePlayData,
itemStyle: {
normal: {
label: {
show: true,
formatter: '{b} , {c},({d}%)',
},
labelLine: { show: true },
},
},
}],
});
}, 300);
},
},
}
</script>
