zoukankan      html  css  js  c++  java
  • 图形插件使用

    highcharts 

    cnpm install highcharts --save

    import Highcharts from 'highcharts'
    然后初始化各种数据,显示表格正常,但是有存在表格没有数据的情况,
    import 'highcharts/modules/no-data-to-display'

    方法如下1)require方式

    import Highcharts from 'highcharts';
    require('highcharts-no-data-to-display')(Highcharts)
    2)import方式

    import Highcharts from 'highcharts';
    import HighchartsNoData from 'highcharts-no-data-to-display';
    HighchartsNoData(Highcharts)

    echarts 

    cnpm install echarts -S

    通常是在需要使用图表的 .vue 文件中直接引入

    import echarts from 'echarts'

    也可以在 main.js 中引入,然后修改原型链

    Vue.prototype.$echarts = echarts

    然后就可以全局使用了

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

    图表的容器必须指定宽高,也就是说 width,height 不能使用百分比,只能用 px
    通常用js 来改变 width 和 height,使图表容器能够自适应

    // 引入基本模板
    let echarts = require('echarts/lib/echarts')
    // 引入饼图组件
    require('echarts/lib/chart/pie')
    // 引入提示框和图例组件
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/legend')

    之所以使用 require 而不是 import,是因为 require 可以直接从 node_modules 中查找,而 import 必须把路径写全

     

  • 相关阅读:
    C51学习笔记
    Keil C51与Keil ARM共存
    keil c51笔记
    css实现三角形
    微信小程序倒计时实现
    微信小程序公共组件的引用与控制
    mac上查找nginx安装位置
    charles抓取移动端app数据
    封装react组件——三级联动
    前端基础(http协议相关篇)
  • 原文地址:https://www.cnblogs.com/lhl66/p/7368378.html
Copyright © 2011-2022 走看看