在前面博客中写到了如何在项目中引入Echarts,是以全局的方式引入的。
但是,对于一个大项目来说,全局引入会将所有的echarts图表打包,从而导致体积过大。所以,我查找了一些资料,发现可以采取按需引入的方式,在页面中直接以组件化的形式引入。所以将实现过程记录下来~
父组件:
<template>
<div class="bar_container">
<barchart id="histogram_graph"></barchart>
</div>
</template>
<script>
import barchart from "./DrawBar"
export default {
name: 'HistogramTest',
components: {
barchart,
},
data(){
return{}
}
}
</script>
<style>
.bar_container{
width: 500px;
height: 500px;
}
</style>
子组件:
<template>
<div>
<h1>通过组件的方式引入Echarts柱状图</h1>
<p>{{msg}}</p>
<div class="bar_compon">
<div :id="id" style="min-width:400px;min-height: 400px;"></div>
</div>
</div>
</template>
<script>
/*由于全局引入会将所有的echarts图表打包,导致体积过大,所以在本项目中,采用组建的形式按需引入*/
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
name: 'DrawBar',
props: {
id: {
type: String,
default: 'chart'
}
},
data(){
return {
msg: '柱状图',
chart: null,
}
},
mounted() {
this.DrawBarChart();
},
methods:{
DrawBarChart(){
this.chart = echarts.init(document.getElementById(this.id));
let colors = ['#179F5D', '#4A8AF3', '#DA4C3F'];
let option = {
color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
right: '20%'
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data:['苹果','香蕉','梨']
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
data: ["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]
}
],
yAxis: [
{
type: 'value',
name: '销量',
min: 0,
max: 250,
position: 'right',
axisLine: {
lineStyle: {
color: colors[0]
}
},
axisLabel: {
formatter: '{value} 个'
}
},
{
type: 'value',
name: '销量',
min: 0,
max: 250,
position: 'right',
offset: 50,
axisLine: {
lineStyle: {
color: colors[1]
}
},
axisLabel: {
formatter: '{value} 个'
}
},
{
type: 'value',
name: '销量',
min: 0,
max: 250,
position: 'left',
axisLine: {
lineStyle: {
color: colors[2]
}
},
axisLabel: {
formatter: '{value} 个'
}
}
],
series: [
{
name:'苹果',
type:'bar',
data:[24,96,129,238,160,180,241]
},
{
name:'香蕉',
type:'bar',
yAxisIndex: 1,
data:[25.69,59,156,11,23,202]
},
{
name:'梨',
type:'line',
yAxisIndex: 2,
data:[24,16,10,20,100,170,201]
}
]
}
this.chart.setOption(option)
}
}
}
</script>
<style>
</style>
页面效果如下:
参考链接:
https://www.jianshu.com/p/cf0a54374419
https://www.jb51.net/article/149095.htm