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

            使用:

            <div id="myChart" :style="{width: '300px', height: '300px'}">

            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;

                                }

                        }    

            }

            案例图示:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1,最小化安装CentOS7,首先需要配置网络,不然 yum 不能用 在安装系统界面选择 网卡配置 点击进去,然后...
    质检员晓东阅读 1,806评论 0 1
  • import numpyas np from sklearn.model_selectionimport trai...
    yujie8888阅读 421评论 0 0
  • 笔者最近在使用cocopods时出现了以下问题 error: RPC failed; curl 18 trans...
    小小码农1阅读 226评论 0 0
  • 财务杜邦分析仪 一,原始数据: 现有一份公司的资产负债表: 二,加工仪表盘相关数据 1-纵向输入月份数据,用于生成...
    阳光的微笑_f3cc阅读 313评论 0 1
  • 藕丝处 花残叶 寻叶攀月圆 泪落湖 涟漪圈点 婵娟寒宫谁人明 今夜一程 明夜一翻彻冷 桂在飘零 非无声 指间轻划荡...
    大寨阅读 117评论 0 5