目标要求
开发一个echats柱图组件，满足如下要求：
如下图所示：
文字描述：
设置底色。
设置轴、y轴、标题颜色为白色。
设置三个柱子不同的颜色。
设置柱子顶端显示数值并设定颜色为白色。
设置图片在div中的位置，偏右。
设置鼠标悬浮的时候显示柱图上的信息。
编码
先介绍整体组件。
<template>
<div class="echartsBarWarpper">
<div :class="colorClass" style="height:172px; width:750px;" :id="id"></div>
</div>
</template>
<script lang="js">
import * as echarts from 'echarts' //引入组件 echarts
export default {
props: { //设置组件的属性值
colorClass: ..., //组件颜色
chartData: ..., //组件数据
id: ..., // div的id属性
title: ... // 标题
},
data() {
return {
myCharts: null
};
},
methods: {
phaseEcharts(){
if (this.myCharts) {
//这里是为了防止出现警告提示：There is a chart instance already initialized on the dom.
this.myCharts.dispose();
}
myCharts = echarts.init(document.getElementById(this.id));
//这里是这次学习中的重点
myCharts.setOption({
title: ..., //设置标题
tooltip : ..., //设置鼠标悬浮显示
grid: ..., //设置柱图在div中的相对位置
xAxis: ..., //x轴
yAxis: ..., //y轴
series: ... //柱图数据
});
}
},
mounted(){
this.phaseEcharts();
},
watch: { //这里是重点，只有配置了这个，父组件对应值变更子组件才能监听的到。
//watch事件监听，可以监听data里的值，可以监听props里传来的值
chartData: function(newOption) {
if (newOption) {
this.chartData = newOption;
this.phaseEcharts();
}
}
}
};
</script>
<style scoped lang="scss">
.green-background { //绿色主色调的渐变色，对应需求1
background: linear-gradient(270deg, rgba(63, 147, 148, 1) 34%, rgba(50, 198, 197, 1) 100%);;
}
.orange-background { //橙色和紫色主色调的渐变色，对应需求2
background: linear-gradient(270deg, rgba(194, 128, 255, 1) 33%, rgba(223, 152, 73, 1) 100%);;
}
</style>接下来主要介绍echarts中options属性。
title，是指柱图的标题。下面是编码：
title: {
text: this.title, // 标题文字
top: '5%', //与顶部距离
left: '5%', //与左侧距离
textStyle: { //文字样式
color: '#FFFFFF' //文字颜色，这个对应需求2
}
},tooltip，鼠标悬浮后的显示。这里只使用了默认值。编码如下：
tooltip : {
trigger: 'axis' //对应需求6
},grid，柱图相对于外框div的相对位置。编码如下：
grid: {
show: false, //不显示网格线
left: '45%', //距离左侧45%，这里对应需求5
right: '20%', //距离右侧20%，这里对应需求5
top: '15%', // 这里需要设置，如果选择使用默认值的话，整个柱图会变形。
bottom: '15%' // 这里需要设置，如果选择使用默认值的话，整个柱图会变形。
},xAxis，x轴相关属性。编码如下：
xAxis: {
type: 'category', //配合yAxis中的type属性，可以调整和横柱还是纵柱，这里x轴是种类，所以是纵柱
data: ['0%~40%', '40%~70%', '70%~100%'], //数值类型
axisLabel: {//x轴文字的配置
show: true,
textStyle: {//x轴数字颜色，对应需求2
color: "#fff",
}
}
},yAxis，y轴相关属性。编码如下：
yAxis: {
type: 'value', //y轴是值，配合xAxis中的type属性，表明是纵轴
axisLine: {show:true}, //显示y轴轴线
splitLine: {show: false}, //不显示网格线
axisLabel: {//y轴文字的配置
show: true,
textStyle: { //字体设置
color: "#fff", //字体颜色，对应需求2
}
}
},series，数值。编码如下：
series: [ //可以有多种数据，所以这里是数组
{
data: this.chartData, // 数据，这里就是数组 [1,2,3]
type: 'bar', //指定类型为柱
barWidth: 30, // 柱图宽度
barMaxWidth: 30, // 最大宽度
itemStyle: {
normal: {
color: function(params) { // 设定不同柱子的颜色，对应需求3
let colors = ["#ffff80","#f59a23","#caf982"];
return colors[params.dataIndex];
},
label: { //设置柱子代表的数值显示，对应需求4
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#fff',
fontSize: 12
}，
barBorderRadius:[5, 5, 0, 0]//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
}
}
}
}
]接下来简单罗列一下props属性，代码如下：
props: {
colorClass: {
type: String,
default() {
return "green-background";
}
},
chartData: {
type: Array,
default() {
return [10,11,12];
}
},
id: {
type: String,
default() {
return "echarts-bar";
}
},
title: {
type: String,
default() {
return "柱图";
}
}
}接下来介绍数据变更，这个是重点，配置了这个父组件动态传值的时候，子组件才能变化。
export default {
...
,
watch: {
//watch事件监听，可以监听data里的值，可以监听props里传来的值
chartData: function(newOption) {
if (newOption) {
this.chartData = newOption;
this.phaseEcharts();
}
}
}
};