vue画图运用echarts

 1 <template>
 2     <div class="tubiao">
 3       <div id="main" style="width: 600px;height:400px;"></div>
 4     </div>
 5 </template>
 6 
 7 <script>
 8   import echarts from 'echarts';
 9     export default {
10         name: 'tubiao',
11         data () {
12             return {
13               chart: null
14             }
15         },
16         methods:{
17           drawPie (id) {
18             this.chart = echarts.init(document.getElementById('main'));
19             this.chart.setOption({
20               title: {
21                 text: 'ECharts 入门示例'
22               },
23               tooltip: {},
24               legend: {
25                 data:['销量']
26               },
27               xAxis: {
28                 data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
29               },
30               yAxis: {},
31               series: [{
32                 name: '销量',
33                 type: 'bar',
34                 data: [5, 20, 36, 10, 10, 20]
35               }]
36             })
37           }
38         },
39         mounted(){
40           this.$nextTick(function() {
41             this.drawPie('main');
42             var that = this;
43             var resizeTimer = null;
44             window.onresize = function() {
45               if (resizeTimer) clearTimeout(resizeTimer);
46               resizeTimer = setTimeout(function() {
47                 that.drawPie('main');
48               }, 100);
49             }
50           });
51         }
52     }
53 </script>
54 
55 <!-- Add "scoped" attribute to limit CSS to this component only -->
56 <style scoped>
57 
58 </style>

先进行安装echarts，

然后在根据echarts官网的提示例子，进行开发练手，

最后就是配置一下路由，进行页面的跳转。

更多更好的效果，可以再echarts官网查看。

转载于:https://www.cnblogs.com/xiaomili/p/6556908.html