Vue+Echarts

先附上代码:

<template>
   <div id="main" style="width:600px;height:400px"></div>
</template>
<script>
    import echarts from 'echarts'
    export default{
         name:'',
         data(){
             return{
                charts:'',
                //指定图表的配置和数据
                options:['直接访问','邮件营销','联盟广告"],
                optionData:[
                 {value:335,name:'直接访问'},
                 {value:310,name:'邮件营销'},
                 {value:234,name:'联盟广告'}
                ]
             }
         },
         methods:{
         drawPie(id){
           //基于准备好的dom,初始化eCharts实例
           this.charts=echarts.init(document.getElementById(id))
           //使用刚指定的配置项和数据显示图表
           this.charts.setOption({
           tooltip:{
            trigger:'item',
            formatter:'{a}<br/>{b}:{c}({d}%)'
         },
         legend:{
           orient:'vertical',
           x:'left',
           data:this.option
         },
         series:[
           {
              name:'访问来源',
              type:'pie',
              redius:['50%','70%'],
              avoidLabelOverlap:false,
              label:{
                 normal:{
                   show:false,
               position:'center'
                 },
                 emphasis:{
                    show:true,
                    textStyle:{
                       fontSize:'30',
                     fontWeight:'blod'

                    }
                 }
              },
                data:this.optionData
           }
         ]
         })
    },
    //调用
    mounted(){
       this.$nextTick(function()    {
       this.drawPie('main')
       })
    }

</script>

首先安装echarts安装包
npm install echarts –save
引入依赖
import echarts from ‘echarts’
准备echarts容器

数据和echarts变量可以描述在data中
methods中定义一个方法
mounted中调用

引用echarts的基本步骤:
1.第一步要引入
2.第二步在body中添加一个dom

3.第三步初始化一个实例echarts.init();
4.第四步指定图表的配置项和数据
5.第五步显示图表
myChart.setOption(option);

echarts是一个免费的，功能强大的制图和可视化库。提供了一个简单的方法来实现添加直观的，互动的和高度可定制的图表，它是纯javascript和基于zrender(h5 canvas类库)