1. 功能场景
在vue.js中，使用echarts组件，创建一个饼图，并且获取饼图的数据和属性
2. 技术支持
- vue.js
- element
- echarts
- webpack
3. 实现源码
3.1 饼图组件
<template>
<el-row :gutter="20">
<el-col :span="24">
<div id="pie_chart"></div>
</el-col>
</el-row>
</template>
<script>
import echarts from 'echarts'
export default {
data() {
return {
}
},
mounted() {
this.buildPie()
},
methods: {
buildPie() {
let pie = echarts.init(document.getElementById('pie_chart'))
let data = this.buildData()
let option = {
backgroundColor: '#ddd',
title: {
text: '销售量统计',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} {c} ({d}%)"
},
legend: {
bottom: 10,
left: 'center',
data: data.labels
},
series: [{
name: '星期',
type: 'pie',
radius: '55%',
center: ['40%', '50%'],
data: data.values,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
}
pie.setOption(option)
pie.on('click', function(params) {
console.log(params.name, params.value, params.percent, params.seriesName, params.seriesType)
})
},
buildData() {
let labels = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
let values = []
for (let i = 0; i < labels.length; i++) {
values.push({
value: parseInt(Math.random() * 10000),
name: labels[i],
color: this.randomColor()
})
}
return {
labels,
values
}
},
randomColor() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
var color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
return color;
}
}
}
</script>
<style scoped>
#pie_chart {
width: 800px;
height: 800px;
}
</style>
3.2 index.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
import echarts from 'echarts'
Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(echarts)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
3.3 路由配置
import Vue from 'vue'
import Router from 'vue-router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Pie from '@/components/charts/pie'
Vue.use(Router)
Vue.use(ElementUI)
export default new Router({
routes: [
{
path: '/',
name: 'Pie',
component: Pie
}
]
})
4. 源码说明
4.1 安装echarts
npm install echarts
4.2 导入echarts
import echarts from 'echarts'
4.3 创建饼图容器
<div id="pie_chart"></div>
4.4 初始化图形数据
buildData() {
let labels = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
let values = []
for (let i = 0; i < labels.length; i++) {
values.push({
value: parseInt(Math.random() * 10000),
name: labels[i],
color: this.randomColor()
})
}
return {
labels,
values
}
}
5. 效果预览
饼图
点击饼图打印结果
