图形插件使用

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 必须把路径写全

 

posted @ 2017-08-15 23:33  鱼樱前端  阅读(227)  评论(0编辑  收藏  举报