zoukankan      html  css  js  c++  java
  • 在VUE中使用Echarts

    第一步:下载echarts

    npm install echarts --save

    第二步:在项目中main.js引入

    import echarts from 'echarts'

    Vue.prototype.$echarts = echarts

    第三步:在组件中使用

    在template标签中写

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

    在script标签中

    export default { 
    
        name: 'test', 
    
        data(){ 
    
            return{ 
    
           } 
    
        }, 
    
       mounted(){   
    
            this.drawLine();
    
        },
    
        methods: {   
    
              drawLine(){       
    
             // 基于准备好的dom,初始化echarts实例       
    
                 let myChart = this.$echarts.init(document.getElementById('myChart'),'light')       
    
              // 绘制图表       
    
                myChart.setOption({           
    
                           title: { text: '这里是表格的标题,自带加粗' },           
    
                           tooltip: {},           
    
                           // 图标中x轴的内容
    
                          xAxis: {               
    
                                       data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]           
    
                           },     
    
                          // 图标中y轴的内容
    
                          yAxis: {},     
    
                           // 数据 
    
                          series: [
    
                                {                name: '销量',               
    
                                                  type: 'bar',               
    
                                                data: [5, 20, 36, 10, 10, 20]         
    
                                     }
    
                                   ]       
    
                           });   
    
                   } 
    
               }
    
              }
    

      注意:我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中

    这是想要达到的要求

    当点击年时图表的x轴显示5个年份。点击月时图表的x轴显示12个月。默认显示一周。

    由于后台直接返回我一个数组

    代码如下

  • 相关阅读:
    ionic3开发环境搭建与配置(win10系统)
    angular4打包以后,刷新报404
    css3文字渐变无效果的解决方案
    node-sass安装失败的解决方案
    python logging 重复写日志问题
    进程和线程的概念
    软件开发目录规范
    相对导入
    python引入导入自定义模块和外部文件
    异常处理
  • 原文地址:https://www.cnblogs.com/JiAyInNnNn/p/11049645.html
Copyright © 2011-2022 走看看