柱状图多维条形图vue_Echarts图表在Vue项目的按需加载及折线图、柱状图、饼图、雷达图样式修改...

一、Echarts 按需加载

有两种方式可以实现按需加载。

第一种：

专门设置一个echarts配置文件

// 文件路径 @/lib/echarts.js 自行配置

// 引入 ECharts 主模块

var echarts = require('echarts/lib/echarts');

// 引入柱状图等

require('echarts/lib/chart/bar');

require("echarts/lib/chart/line");

require("echarts/lib/chart/pie");

// 引入提示框和标题组件

require('echarts/lib/component/tooltip');

require('echarts/lib/component/title');

require("echarts/lib/component/dataZoom");

require("echarts/lib/component/markPoint");

require("echarts/lib/component/markLine");

export default echarts

在需要的组件内加载echarts，绘制图表

import {skillOption} from './option/skillAnalyOption'

// 重点：此位置引入的是你单独配置的echarts

import echarts from '@/lib/echarts'

export default {

mounted() {

// 调用绘制图表的方法

this.draw();

let that = this;

window.onresize = function () {

that.pracChart.resize();

that.skillChart.resize();

that.pieChart.resize();

that.histogramChart.resize();

}

},

methods: {

draw () {

// 实例化echarts对象

this.pieChart= echarts.init(this.$refs.myChart)

//下面是具体的配置

this.pieChart.setOption(skillOption);

//绑定的一些事件

this.pieChart.on('mouseover', (params) => {

this.changeId = params.name

this.getHistogramChartData(this.cur2, this.changeId)

});

},

getPrcData () {

this.pracChart.setOption({

xAxis: {

data: this.PrcData.date

},

series: [{

data: this.PrcData.hour //将异步请求获取到的数据进行装载

}]

})

},

}

}

第二种方式：

引入插件babel-plugin-equire,配合实现Echarts按需引入

下载babel-plugin-equire

npm install babel-plugin-equire -D

在.babelrc文件中的配置

"plugins": [

"... 其他插件",

"equire"

]

项目中是这样配置的：

"plugins": [

["transform-runtime",

{

"polyfill": false

}

],

"equire"

],

修改@/lib/echarts文件

const echarts = equire([

// 写上你需要的

'bar',

'line',

'pie',

'radar',

'legend',

'title',

'markLine',

'dataZoom'

])

export default echarts