vue echarts图表插件
vue 2017-11-27 16:03:14

1.安装 echarts 安装包 

C/C++ Code复制内容到剪贴板
  1. $ npm install echarts --save  

 

2.引入依赖

JavaScript Code复制内容到剪贴板
  1. import echarts from 'echarts'  

 

3.准备echarts容器

XML/HTML Code复制内容到剪贴板
  1. <div id="main" style="width: 600px;height: 400px;"></div>  

 

4.数据和 charts 变量可以描述在 data 中

5.methods 中 定义一个方法，内容就是平时echarts的步骤。

6.mounted 中调用 （mounted 是 vue 的生命周期，表示挂载完毕，html 已经渲染）

JavaScript Code复制内容到剪贴板
  1. mounted(){  
  2.             this.$nextTick(function() {  
  3.                 this.drawPie('main')  
  4.             })  
  5.         }  

20170405195336849.jpg

 

 

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.   <!--为echarts准备一个具备大小的容器dom-->  
  3.   <div id="main" style="width: 600px;height: 400px;"></div>  
  4. </template>  
  5. <script>  
  6.   import echarts from 'echarts'  
  7.     export default {  
  8.         name: '',  
  9.         data () {  
  10.             return {  
  11.                 charts: '',  
  12.                 opinion:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],  
  13.                 opinionData:[  
  14.                   {value:335, name:'直接访问'},  
  15.                   {value:310, name:'邮件营销'},  
  16.                   {value:234, name:'联盟广告'},  
  17.                   {value:135, name:'视频广告'},  
  18.                   {value:1548, name:'搜索引擎'}  
  19.                 ]  
  20.             }  
  21.         },  
  22.         methods:{  
  23.             drawPie(id){  
  24.                this.charts = echarts.init(document.getElementById(id))  
  25.                this.charts.setOption({  
  26.                  tooltip: {  
  27.                    trigger: 'item',  
  28.                    formatter: '{a}<br/>{b}:{c} ({d}%)'  
  29.                  },  
  30.                  legend: {  
  31.                    orient: 'vertical',  
  32.                    x: 'left',  
  33.                    data:this.opinion  
  34.                  },  
  35.                  series: [  
  36.                    {  
  37.                      name:'访问来源',  
  38.                      type:'pie',  
  39.                      radius:['50%','70%'],  
  40.                      avoidLabelOverlap: false,  
  41.                      label: {  
  42.                        normal: {  
  43.                          show: false,  
  44.                          position: 'center'  
  45.                        },  
  46.                        emphasis: {  
  47.                          show: true,  
  48.                          textStyle: {  
  49.                            fontSize: '30',  
  50.                            fontWeight: 'blod'  
  51.                          }  
  52.                        }  
  53.                      },  
  54.                      labelLine: {  
  55.                        normal: {  
  56.                          show: false  
  57.                        }  
  58.                      },  
  59.                      data:this.opinionData  
  60.                    }  
  61.                  ]  
  62.                })  
  63.             }  
  64.         },  
  65.       //调用  
  66.         mounted(){  
  67.             this.$nextTick(function() {  
  68.                 this.drawPie('main')  
  69.             })  
  70.         }  
  71.     }  
  72. </script>  
  73. <style scoped>  
  74.     * {  
  75.         margin: 0;  
  76.         padding: 0;  
  77.         list-style: none;  
  78.     }  
  79. </style>  

 

本文来自于：http://www.yoyo88.cn/study/vue/233.html

上一篇 在页面加载之前作异步请求，请求结束之后渲染页面
下一篇 vue 绑定下拉框的事件
相关的文章
Powered by yoyo苏ICP备15045725号