Vue系列——在vue项目中使用echarts

Posted haonanElva

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue系列——在vue项目中使用echarts相关的知识,希望对你有一定的参考价值。

安装echarts依赖

npm install echarts -S

创建图表

全局引入

  • main.js
    // 引入echarts
    import echarts from echarts
    
    Vue.prototype.$echarts = echarts 
  • Hello.vue
    <div id="myChart" :style="{width: ‘300px‘, height: ‘300px‘}"></div>
    export default {
      name: hello,
      data () {
        return {
          msg: Welcome to Your Vue.js App
        }
      },
      mounted(){
        this.drawLine();
      },
      methods: {
        drawLine(){
            // 基于准备好的dom,初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById(myChart))
            // 绘制图表
            myChart.setOption({
                title: { text: 在Vue中使用echarts },
                tooltip: {},
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: 销量,
                    type: bar,
                    data: [5, 20, 36, 10, 10, 20]
                }]
            });
        }
      }
    }

    注意: 这里echarts初始化应在钩子函数mounted()中,这个钩子函数是在el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用

    按需引入

    上面全局引入会将所有的echarts图表打包,导致体积过大,所以我觉得最好还是按需引入。

  • Hello.vue
     import echarts from echarts/lib/echarts;
     // 引入柱状图
     import echarts/lib/chart/pie;
    // 引入提示框和title组件 import
    echarts/lib/component/title; import echarts/lib/component/legend;

     

以上是关于Vue系列——在vue项目中使用echarts的主要内容,如果未能解决你的问题,请参考以下文章

在vue中使用Echarts

Vue项目中使用Echarts

Vue项目中使用Echarts

在Vue项目中使用ECharts

在vue项目中使用echarts(echarts不显示,echarts使用详细)

在vue项目中使用echarts制作3d柱状图