简单Vue项目-Echarts-柱图组件

目标要求

开发一个echats柱图组件，满足如下要求：

如下图所示：

文字描述：

1. 设置底色。

2. 设置轴、y轴、标题颜色为白色。

3. 设置三个柱子不同的颜色。

4. 设置柱子顶端显示数值并设定颜色为白色。

5. 设置图片在div中的位置，偏右。

6. 设置鼠标悬浮的时候显示柱图上的信息。

编码

先介绍整体组件。

<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属性。

1. title，是指柱图的标题。下面是编码：

title: {
  text: this.title, // 标题文字
  top: '5%', //与顶部距离
  left: '5%', //与左侧距离
  textStyle: { //文字样式
    color: '#FFFFFF' //文字颜色，这个对应需求2
  }
},复制

2. tooltip，鼠标悬浮后的显示。这里只使用了默认值。编码如下：

tooltip : {
  trigger: 'axis' //对应需求6
},复制

3. grid，柱图相对于外框div的相对位置。编码如下：

grid: {
  show: false, //不显示网格线
  left: '45%', //距离左侧45%，这里对应需求5
  right: '20%', //距离右侧20%，这里对应需求5
  top: '15%', // 这里需要设置，如果选择使用默认值的话，整个柱图会变形。
  bottom: '15%' // 这里需要设置，如果选择使用默认值的话，整个柱图会变形。
},复制

4. xAxis，x轴相关属性。编码如下：

xAxis: {
  type: 'category', //配合yAxis中的type属性，可以调整和横柱还是纵柱，这里x轴是种类，所以是纵柱
  data: ['0%~40%', '40%~70%', '70%~100%'], //数值类型
  axisLabel: {//x轴文字的配置
    show: true, 
    textStyle: {//x轴数字颜色，对应需求2
      color: "#fff",
    }
  }
},复制

5. yAxis，y轴相关属性。编码如下：

yAxis: {
  type: 'value', //y轴是值，配合xAxis中的type属性，表明是纵轴
  axisLine: {show:true}, //显示y轴轴线
  splitLine: {show: false}, //不显示网格线
  axisLabel: {//y轴文字的配置
    show: true, 
    textStyle: { //字体设置
      color: "#fff", //字体颜色，对应需求2
    }
  }
},复制

6. 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();
      }
    }
  }
};复制