zoukankan      html  css  js  c++  java
  • vue 引用echarts控件进行数据可视化显示

    最近公司在项目的开发中引入echarts,运行时发现有些问题

    在使用echarts的时候,下载按钮显示数据不全

    代码如下:

                toolbox: {
                  
                  feature: {
                    saveAsImage: {}
                  }
                },

    界面效果如下:

    查找echarts api,找到关于图形下载按钮的代码可做修改如下

    代码如下:

                toolbox: {
                  right: 20,
                  feature: {
                    saveAsImage: {}
                  }
                },

    界面效果如下:

    修改完代码,对echarts引用进行了分析,总结如下:

    准备工作,需要先echarts插件

    npm install echarts -S

    我们项目中只是个别页面进行了引用,于是只在单个组件内使用,进行了局部引用

    import echarts from "echarts";
    require("echarts/theme/macarons");// echarts theme  主题组件

    如果项目中使用界面较多,可以使用全局引用

    在main.js中引入echarts,将其绑定到vue原型上

    import echarts from 'echarts';
    Vue.prototype.$echarts = echarts;

    在项目的任何地方使用echarts都可以这样使用

    methods: {
      initCharts () {
      let myChart = this.$echarts.init(this.$refs.chart);
      console.log(this.$refs.chart)
      // 绘制图表
      myChart.setOption({
      title: { text: '在Vue中使用echarts' },
      tooltip: {},
      xAxis: {
      data: ["西湖区","拱墅区"]
      },
      yAxis: {},
      series: [{
      name: '数量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
      }]
      });
      }
       },
       mounted () {
      this.initCharts();
     }
     
  • 相关阅读:
    java作用域public ,private ,protected 及不写时的区别
    JAVA的静态变量、静态方法、静态类
    栈内存 堆内存
    java
    数组 bash shell
    SYN Cookie的原理和实现
    Python 时间 time
    sysctl命令详解
    lvs
    软件工程概论个人作业01
  • 原文地址:https://www.cnblogs.com/chenjin2136/p/12206822.html
Copyright © 2011-2022 走看看