vue echarts

  1. // 导入echarts
    //import echarts from 'echarts'
    // 引入基本模板
    let echarts = require('echarts/lib/echarts')
    // 引入饼图组件
    require('echarts/lib/chart/pie')
    // 引入提示框和图例组件
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/legend')

  4. <!--  
  5.     2017.2.11  
  6.     by vanishment  
  7.     *************  
  8.     echarts小组件  
  9. -->  
  10. <style scoped>  
  11. .content {  
  12.     /*自行添加样式即可*/  
  13. }  
  14.   
  15.   
  16. #main {  
  17.     /*需要制定具体高度，以px为单位*/  
  18.     height: 400px;  
  19. }  
  20. </style>  
  21. <template>  
  22.     <div class="content">  
  23.         <div id="main"></div>  
  24.     </div>  
  25. </template>  
  26. <script>  
  27. // 导入echarts  
  28. import echarts from 'echarts'  
  29. // 方便AJAX，按个人喜好添加，然后对应修改下方获取数据的代码  
  30. import $ from 'jquery'  
  31. // 皮肤引入 import theme-name from theme-folder  
  32.   
  33.   
  34. // 以饼图为例  
  35. // 其他种类图表配置项参见百度echarts官网  
  36.   
  37.   
  38. export default {  
  39.     data() {  
  40.             return {  
  41.                 // 初始化空对象  
  42.                 chart: null,  
  43.                 // 初始化图表配置  
  44.                 opinion: ['高富帅', '矮富帅', '高富挫', '矮富挫', '女生'],  
  45.                 opinionData: [{  
  46.                     value: 26,  
  47.                     name: '高富帅'  
  48.                 }, {  
  49.                     value: 31,  
  50.                     name: '矮富帅'  
  51.                 }, {  
  52.                     value: 18,  
  53.                     name: '高富挫'  
  54.                 }, {  
  55.                     value: 28,  
  56.                     name: '矮富挫'  
  57.                 }, {  
  58.                     value: 21,  
  59.                     name: '女生'  
  60.                 }]  
  61.             }  
  62.         },  
  63.         methods: {  
  64.             // 绘图  
  65.             drawGraph(id) {  
  66.                 // 绘图方法  
  67.                 this.chart = echarts.init(document.getElementById(id))  
  68.                     // 皮肤添加同一般使用方式  
  69.                 this.chart.showLoading()  
  70.                     // 返回到data中  
  71.                 var that = this  
  72.                     // ajax 请求数据  
  73.                 $.ajax({  
  74.                         // 方式  
  75.                         type: "GET",  
  76.                         // 是否异步  
  77.                         async: true,  
  78.                         // 路径||API  
  79.                         url: "xxx",  
  80.                         //返回数据形式为json  
  81.                         dataType: "json",  
  82.                         // 加载成功  
  83.                         success: function(result) {  
  84.                             // 更新初始数据  
  85.                             that.opinionData = result  
  86.                         },  
  87.                         // 加载错误  
  88.                         error: function(errorMsg) {  
  89.                             // alert("请求数据失败!");  
  90.                             console.log(errorMsg)  
  91.                         }  
  92.                     })  
  93.                     // set  
  94.                 this.chart.setOption({  
  95.                     title: {  
  96.                         text: '女生喜欢的男生种类',  
  97.                         subtext: '纯属扯犊子',  
  98.                         x: 'center'  
  99.                     },  
  100.                     tooltip: {  
  101.                         trigger: 'item',  
  102.                         formatter: "{a} <br/>{b} : {c} ({d}%)"  
  103.                     },  
  104.                     legend: {  
  105.                         x: 'center',  
  106.                         y: 'bottom',  
  107.                         data: this.opinion // 别忘了this  
  108.                     },  
  109.                     toolbox: {  
  110.                         show: true,  
  111.                         feature: {  
  112.                             mark: {  
  113.                                 show: true  
  114.                             },  
  115.                             dataView: {  
  116.                                 show: true,  
  117.                                 readOnly: false  
  118.                             },  
  119.                             magicType: {  
  120.                                 show: true,  
  121.                                 type: ['pie']  
  122.                             },  
  123.                             restore: {  
  124.                                 show: true  
  125.                             },  
  126.                             saveAsImage: {  
  127.                                 show: true  
  128.                             }  
  129.                         }  
  130.                     },  
  131.                     calculable: true,  
  132.                     series: [{  
  133.                         name: '种类',  
  134.                         type: 'pie',  
  135.                         // 内圆半径，外圆半径  
  136.                         radius: [30, 100],  
  137.                         // 位置，左右，上下  
  138.                         center: ['50%', '50%'],  
  139.                         roseType: 'area',  
  140.                         data: this.opinionData, // 别忘了this  
  141.   
  142.   
  143.                     }]  
  144.                 })  
  145.                 this.chart.hideLoading()  
  146.             }  
  147.         },  
  148.         // keypoint：执行方法  
  149.         // “将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。”  
  150.         mounted() {  
  151.             this.$nextTick(function() {  
  152.                 this.drawGraph('main')  
  153.             })  
  154.         }  
  155. }  
  156. </script>  
posted @ 2018-01-04 14:57  小牧临风  阅读(109)  评论(0)  编辑  收藏  举报