前端echarts写入vue小坑

由于个人水平原因，今天拿到了两个比较小的任务都是环形图表组件的编写，一下午通过对echart的学习了解，暂时先做出了一个小的图表，并对其中的一些属性进行了研究，以下是效果图，虽然东西展示不多，但是确实下了心思研究了一番。

 

一、环形图表组件的编写

1. 由于产品需求，对旅游舆情指数进行图表分析，通过echert库，对环形图表进行设计。，首先，echart对于处理图表的问题，很方便。毫无疑问要先下载echart的库，

npm install echarts -S

再通过main.JS对echartJS库进行引用，就可以直接使用了。

import echarts from 'echarts';
Vue.prototype.$echarts = echarts;

 

2. 在html中定义好图表的容器，通过js来初始化echart实例。

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

但是在vue中要对echarts实例进行重新编写

let myChart = this.$echarts.init(document.getElementById('main'));

3. 定义methods（一定要加s，因为这个s找了很久的BUG，一定要认真），在methods中定义一个函数xxx（--图表的写法--），在mounted（）中调用xxx函数

mounted(){
  this.ring();
},
methods:{
  ring(){

4.圆环其实就是饼状图，只不过在radius属性中设置了中心圆的大小，外环和内环的差值就形成了环形。

 

5.在圆环下面文字标注说明，并与圆环数值比例相同。要保证两者的data值相同，value值可根据比例自行调控。

 

今天晚上一直在纠结这个怎么写进vue组件里...