由于个人水平原因,今天拿到了两个比较小的任务都是环形图表组件的编写,一下午通过对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组件里...