2019-05-22

在vue-cli项目中使用echarts

        这个示例使用vue-cli脚手架搭建

        安装echarts依赖

            npm install echarts -S

            或者使用国内的淘宝镜像：

            安装

            npm install -g cnpm --registry=https://registry.npm.taobao.org

            使用

            cnpm install echarts -S！

            创建图表

            全局引入

            main.js里：

            // 引入echarts  

           import   echarts  from 'echarts'

            全局挂在到vue实例上：

            Vue.prototype.$echarts=echarts

            使用：

            

            export default {

                  name: 'hello',

                  data () {

                            return {

                            }

                      },

                  mounted(){

                            this.drawLine();

                  },

                  methods: {

                            drawLine(){

                                    // 基于准备好的dom，初始化echarts实例

                                    let myChart = this.$echarts.init(document.getElementById('myChart'))

                                    myChart.clear();

                                    // 绘制图表

                                    var option = {

                                                title: { text: '在Vue中使用echarts' },

                                                tooltip: {},

                                                xAxis: {

                                                        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

                                                 },

                                                yAxis: {},

                                                series: [{

                                                        name: '销量',

                                                        type: 'bar',

                                                        data: [5, 20, 36, 10, 10, 20]

                                                }]

                                        }

                                        myChart.setOption(option)；// 调用echarts

                                        window.onresize = myChart.resize;

                                }

                        }    

            }

            案例图示：