echart使用

安装依赖

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>