安装依赖
npm install echarts -S
index.js文件
import Vue from 'vue'
import App from './App.vue'
import router from './router/router'
import store from './store/store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
import echarts from 'echarts'
Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.prototype.$echarts = echarts
Vue.prototype.$ajax = axios
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
**
index.vue文件
**
``
<template>
<div id="chartPie" class="pie-wrap"></div>
</template>
<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons')// 引入主题
export default {
data () {
return {
chartPie: null,
qdata: []
}
},
mounted () {
this.$nextTick(() => {
this.drawPieChart(this.qdata)
})
},
methods: {
drawPieChart (qdata, answer) {
this.qdata = qdata
let mytextStyle = {
color: '#333',
fontSize: 18
}
let mylabel = {
show: true,
position: 'right',
offset: [30, 40],
formatter: '{b} : {c} ({d}%)',
textStyle: mytextStyle
}
this.chartPie = echarts.init(document.getElementById('chartPie'), 'macarons')
this.chartPie.setOption({
title: {
text: '问题答案分布',
// subtext: '-----',
subtext: '正确答案:' + answer,
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
// data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
data: ['A', 'B', 'C', 'D'],
left: 'center',
top: 'bottom',
orient: 'horizontal'
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
center: ['50%', '50%'],
data: qdata,
data: [
{ value: 335, name: '错误答案D' },
{ value: 310, name: '错误答案C' },
{ value: 234, name: '错误答案B' },
{ value: 135, name: '正确答案A' }
],
animationEasing: 'cubicInOut',
animationDuration: 2600,
label: {
emphasis: mylabel
}
}
]
})
}
}
}
</script>
<style lang='less' scope>
.pie-wrap{
width:100%;
height:400px;
}
</style>
|