msyj-admin-local/src/components/EchartRender.vue

<template>
  <div class="echart-render chart-box">
    <h3 class="chart-title">{{ chartTitle }}</h3>
    <v-chart
      :options="chartOption"
      v-if="chartOption"
      autoresize
      ref="vueChart"
    ></v-chart>
    <p class="chart-none" v-else>暂无数据</p>
  </div>
</template>

<script>
import echarts from "echarts/lib/echarts";

export default {
  name: "echart-render",
  props: {
    chartType: {
      type: String,
      required: true,
      validator(value) {
        return (
          ["bar", "pie", "line", "barGroup", "lineGroup"].indexOf(value) !== -1
        );
      }
    },
    chartData: {
      type: [Object, Array],
      required: true
    },
    chartTitle: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      chartOption: null
    };
  },
  mounted() {
    this.getOptions();
  },
  methods: {
    getOptions() {
      const name = this.chartType[0].toUpperCase() + this.chartType.slice(1);
      this.chartOption = this[`get${name}Option`](this.chartData);
    },
    getLineOption(datas) {
      let labels = [],
        vals = [];
      datas.map(item => {
        labels.push(item.name);
        vals.push(item.value);
      });
      const linearColor = new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        {
          offset: 1,
          color: "rgba(34,192,255,1)"
        },
        {
          offset: 0,
          color: "rgba(34,192,255,0)"
        }
      ]);

      return {
        grid: {
          top: "10%",
          bottom: "12%",
          left: "5%",
          right: "5%"
        },
        tooltip: {
          show: true,
          formatter: function(params) {
            return params.value + "%";
          }
        },
        xAxis: {
          type: "category",
          data: labels,
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(231,234,241,1)"
            }
          },
          axisLine: {
            lineStyle: {
              color: "rgba(231,234,241,1)"
            }
          },
          axisLabel: {
            color: "#7C86A3",
            fontSize: 12,
            fontWeight: "bold"
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(231,234,241,1)"
            }
          },
          axisLine: {
            lineStyle: {
              color: "rgba(231,234,241,1)"
            }
          },
          axisLabel: {
            fontSize: 12,
            color: "#7C86A3",
            formatter: function(value, index) {
              return value + "%";
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: "数量",
            type: "line",
            smooth: true,
            data: vals,
            itemStyle: {
              color: "rgba(34, 192, 255, 1)"
            },
            lineStyle: {
              color: "rgba(34, 192, 255, 1)"
            },
            areaStyle: {
              color: linearColor
            }
          }
        ]
      };
    },
    getPieOption(datas) {
      if (!datas.chartLabels.length) return;
      var seriesData = datas.chartLabels.map(function(item, index) {
        return {
          name: item,
          value: datas.chartData[0][index]
        };
      });
      return {
        grid: {
          top: "24%",
          bottom: "10%"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          show: true,
          itemGap: 20,
          itemWidth: 20,
          textStyle: {
            fontSize: 16
          }
        },
        series: [
          {
            name: "数量",
            type: "pie",
            radius: "70%",
            data: seriesData,
            label: {
              show: false
            },
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
    },
    getBarOption(datas) {
      if (!datas.names.length) return;
      return {
        grid: {
          top: "15%",
          bottom: "18%"
        },
        tooltip: {
          show: true
        },
        xAxis: {
          type: "category",
          data: datas.names,
          axisLabel: {
            fontSize: 14,
            fontWeight: "bold"
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: "#e0e0e0"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#333"
            }
          },
          axisLabel: {
            fontSize: 14
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: "差值和",
            type: "bar",
            barWidth: 30,
            data: datas.dataList,
            label: {
              show: true,
              position: "top",
              color: "#333",
              fontWeight: 600
            }
          }
        ]
      };
    },
    getBarGroupOption(datas) {
      if (!datas.names.length) return;
      var onePageMaxBarNum = 20;
      var barNum = datas.names.length * datas.dataList.length;
      var xAxis = datas.dataList.map(function(item) {
        return item.name;
      });
      var series = datas.names.map(function(name, index) {
        var data = datas.dataList.map(function(item) {
          return item.data[index];
        });
        return {
          name: name,
          type: "bar",
          data: data,
          barMaxWidth: 30,
          barMinHeight: 2
          // label: {
          //   show: true,
          //   position: "top",
          //   fontSize: 12,
          //   color: "#333",
          //   formatter: function(params) {
          //     return params.value.toFixed(2) + "%";
          //   }
          // }
        };
      });

      var options = {
        grid: {
          top: "15%",
          bottom: "10%"
        },
        tooltip: {
          show: true,
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          },
          formatter: function(params) {
            var label = params[0].axisValueLabel;
            var infos = params.map(function(item) {
              return item.seriesName + "：" + item.value.toFixed(2) + "%";
            });
            infos.unshift(label);
            return infos.join("<br/>");
          }
        },
        legend: {
          data: datas.names,
          right: 0,
          itemWidth: 14,
          textStyle: {
            fontSize: 16
          }
        },
        xAxis: {
          type: "category",
          data: xAxis,
          axisLabel: {
            fontSize: 14,
            fontWeight: "bold"
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: false
          },
          axisLabel: {
            fontSize: 14,
            formatter: function(value, index) {
              return value + "%";
            }
          },
          axisTick: {
            show: false
          }
        },
        series: series
      };

      if (barNum > onePageMaxBarNum) {
        var zoomInitRange = Math.floor((onePageMaxBarNum * 100) / barNum);
        options.grid.bottom = "16%";
        options.dataZoom = [
          {
            type: "inside",
            start: 0,
            end: zoomInitRange
          },
          {
            type: "slider",
            start: 0,
            end: zoomInitRange
          }
        ];
      }

      return options;
    },
    getLineGroupOption(datas) {
      if (!datas.length) return;
      var names = datas.map(function(item) {
        return item.name;
      });
      var xaxis = datas[0].dataList.map(function(item, index) {
        return index;
      });

      var series = datas.map(function(item) {
        return {
          name: item.name,
          type: "line",
          symbol: "circle",
          smooth: true,
          itemStyle: {
            emphasis: {
              color: "#333"
            }
          },
          data: item.dataList.map(function(num) {
            return num * num;
          })
        };
      });
      return {
        grid: {
          top: "15%",
          bottom: "12%"
        },
        tooltip: {
          show: true,
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          },
          formatter: function(params) {
            var label = params[0].axisValueLabel;
            var infos = params.map(function(item) {
              return item.seriesName + "：" + Math.sqrt(item.value);
            });
            infos.unshift(label);
            return infos.join("<br/>");
          }
        },
        legend: {
          data: names,
          right: 0,
          itemWidth: 14,
          textStyle: {
            fontSize: 16
          }
        },
        xAxis: {
          type: "category",
          data: xaxis,
          axisLabel: {
            show: false,
            fontSize: 14
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: "value",
          interval: 1,
          splitLine: {
            show: false
          },
          axisLabel: {
            fontSize: 14,
            formatter: function(value) {
              var num = Math.sqrt(value);
              return num % 1 ? "" : parseInt(num);
            }
          },
          axisTick: {
            show: false
          }
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 30
          },
          {
            type: "slider",
            start: 0,
            end: 30
          }
        ],
        series: series
      };
    }
  }
};
</script>