基于Vue，Echarts的数据可视化一

一.Echarts的学习

1.什么是ECharts

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

2.如何使用ECharts

创建一个VueCli3项目命名为learnecharts。

vue create learnecharts

引入Echart

npm install --save echarts

在项目里边引用Echart

// 引入echarts
import echarts from 'echarts'
//在vue中设置Echart
Vue.prototype.$echarts = echarts

自定义组件：（讲解见代码注释)

 

<template>
    <div class="box">
        <div id="pieChart"></div>
    </div>
</template>
 
<script>
export default {
    mounted(){
        this.chartFn()
    },
    methods:{
        chartFn(){
            // 基于准备好的dom，初始化echarts实例
            var pieChart = this.$echarts.init(document.getElementById('pieChart'));
            pieChart.setOption({
                title:{
                    text:'饼图', //标题
                    subtext: '练习专用',  //副标题
                    x:'center'  // 位置
                },
                legend: {
                    orient: 'vertical', //图例列表的布局朝向。
                    left: 'left', //距离左侧的距离
                    data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                },
                series : [
                    {
                        name: '访问来源',
                        type: 'pie', //类型
                        radius : '60%', //饼图的半径
                        center: ['50%', '60%'], //饼图位置的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
                        data:[
                            {value:335, name:'直接访问'},
                            {value:310, name:'邮件营销'},
                            {value:234, name:'联盟广告'},
                            {value:135, name:'视频广告'},
                            {value:1548, name:'搜索引擎'}
                        ],
                    }
                ]
            })
        }
    }
}
</script>
 
<style scoped>
.box{
    margin-top:50px;
}
#pieChart{
    width:500px;
    height:500px;
}
</style>

效果图