项目使用的echarts版本是 4.2.1，element-resize-detector版本是1.2.4
配置属性option是官方示例的“堆叠图”属性
图表组件：
<template>
<div>
<div id="chartMain" style="height:380px;width:100%;padding-bottom: 30px;"/>
</div>
</template>
<script>
// 按需引入 引入 ECharts 主模块
import chartResize from "@/modules/supplierMap/views/supplierPortrait/components/chartResize";
let echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/bar')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
export default {
name: "histogramChart",
mixins:[chartResize],
props: {
// 父组件传递过来的图表数据
chartData: {
type: Object,
required: true
}
},
data() {
return {
// Echarts实例
chart: null,
chartDom:null
}
},
watch: {
/* 如果图表数据是后台获取的，监听父组件中的数据变化，重新触发Echarts */
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
}
}
},
mounted() {
/* 图表初始化 */
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
/* 释放图表实例 */
this.chart.dispose()
/* dispose 会释放内部占用的一些资源和事件绑定，但是解除实例的引用我们是做不到的，所以需要重新赋值为null */
this.chart = null
},
methods: {
initChart() {
this.chartDom = document.getElementById('chartMain');
this.chart = echarts.init(this.chartDom);
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Direct',
type: 'bar',
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Email',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Search Engine',
type: 'bar',
data: [862, 1018, 964, 1026, 1679, 1600, 1570],
emphasis: {
focus: 'series'
},
markLine: {
lineStyle: {
type: 'dashed'
},
data: [[{ type: 'min' }, { type: 'max' }]]
}
},
{
name: 'Baidu',
type: 'bar',
barWidth: 5,
stack: 'Search Engine',
emphasis: {
focus: 'series'
},
data: [620, 732, 701, 734, 1090, 1130, 1120]
},
{
name: 'Google',
type: 'bar',
stack: 'Search Engine',
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 290, 230, 220]
},
{
name: 'Bing',
type: 'bar',
stack: 'Search Engine',
emphasis: {
focus: 'series'
},
data: [60, 72, 71, 74, 190, 130, 110]
},
{
name: 'Others',
type: 'bar',
stack: 'Search Engine',
emphasis: {
focus: 'series'
},
data: [62, 82, 91, 84, 109, 110, 120]
}
]
};
this.setOptions(option)
},
setOptions(option) {
this.chart.setOption(option)
}
}
}
</script>
<style scoped>
</style>
chartResize.js让图表根据容器自适应大小
/** @format */
import ResizeListener from 'element-resize-detector';
export default {
methods: {
/* 对chart元素尺寸进行监听，当发生变化时同步更新echart视图 */
chartEleResizeListener() {
const chartInstance = ResizeListener({
strategy: 'scroll',
callOnAdd: true
});
chartInstance.listenTo(this.$el, () => {
if (!this.chart) return;
this.chart.resize();
});
},
/* 当窗口缩放时，echart动态调整自身大小 */
windowResizeListener() {
if (!this.chart) return;
this.chart.resize();
}
},
mounted() {
window.addEventListener('resize', this.windowResizeListener);
this.chartEleResizeListener();
},
beforeDestroy() {
window.removeEventListener('resize', this.windowResizeListener);
}
}
对了，这次项目使用图表我其实浪费了挺多时间的，之前不知道这个项目用过echarts，自己以前做的vue项目也没用过图表，React项目用过的Bizcharts在vue又用不了，所以就网上搜了一下。有推荐v-charts的，真的看到它就快跑，如果我事先多了解一下，就会发现这个的文档极其“简洁”，示例也很少，像我这种菜鸟是玩不会的。然后就想用echarts，（因为听说过很多次，之前react也想过用，不过那时候觉得Bizcharts使用起来更简单，没记错应该是按照官方文档傻瓜式操作就可以上手了），然后网上也有很多博文讲怎么在vue项目中引入包下载依赖，但是我看到的很多都是echarts和vue-echarts一起使用的！我们项目vue是2.x，echarts是4.2.1，应该是版本很老了吧，按照其他博文的方法下载vue-echarts，就会报各种错，我搞了好久，报错层出不穷，其中一个报错原因，有篇博文说是因为echarts和vue-echarts版本不匹配，echarts版本太低。最后我就放弃了。我一开始以为vue-echarts就是我想用的echarts，但后来发现并不是。所以搞不来那些花里胡哨的就不搞了，咱就用echarts不香吗？反正我觉得echarts好用，官方文档很完备，配置属性一目了然，甚至觉得比Bizcharts还好用，当初用Bizcharts搞好久都没搞明白那些属性。