|
@@ -0,0 +1,487 @@
|
|
|
+<template>
|
|
|
+ <div class="chart" :id="id"></div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import util from "@/helper/util.js";
|
|
|
+import partten from "@/helper/partten.js";
|
|
|
+import * as echarts from "echarts";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "multiple-bar-chart",
|
|
|
+ componentName: "multiple-bar-chart",
|
|
|
+ props: {
|
|
|
+ width: {
|
|
|
+ type: String,
|
|
|
+ default: "100%",
|
|
|
+ },
|
|
|
+ height: {
|
|
|
+ type: String,
|
|
|
+ default: "800px",
|
|
|
+ },
|
|
|
+ lineData: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [
|
|
|
+ {
|
|
|
+ text: "日发电量",
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ text: "1",
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "2",
|
|
|
+ value: 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "3",
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "4",
|
|
|
+ value: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "5",
|
|
|
+ value: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "6",
|
|
|
+ value: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "7",
|
|
|
+ value: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "8",
|
|
|
+ value: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "9",
|
|
|
+ value: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "10",
|
|
|
+ value: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "11",
|
|
|
+ value: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "12",
|
|
|
+ value: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "13",
|
|
|
+ value: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "14",
|
|
|
+ value: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "15",
|
|
|
+ value: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "16",
|
|
|
+ value: 3,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "上网电量",
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ text: "1",
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "2",
|
|
|
+ value: 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "3",
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "4",
|
|
|
+ value: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "5",
|
|
|
+ value: 4,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "6",
|
|
|
+ value: 5,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "7",
|
|
|
+ value: 6,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "8",
|
|
|
+ value: 7,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "9",
|
|
|
+ value: 8,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "10",
|
|
|
+ value: 7,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "11",
|
|
|
+ value: 9,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "12",
|
|
|
+ value: 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "13",
|
|
|
+ value: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "14",
|
|
|
+ value: 5,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "15",
|
|
|
+ value: 12,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "16",
|
|
|
+ value: 11,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ areaData: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [
|
|
|
+ {
|
|
|
+ name: "1",
|
|
|
+ start: 0,
|
|
|
+ end: 100,
|
|
|
+ state: "green",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "1",
|
|
|
+ start: 100,
|
|
|
+ end: 200,
|
|
|
+ state: "red",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "1",
|
|
|
+ start: 200,
|
|
|
+ end: 300,
|
|
|
+ state: "yellow",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "2",
|
|
|
+ start: 300,
|
|
|
+ end: 800,
|
|
|
+ state: "green",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "3",
|
|
|
+ start: 800,
|
|
|
+ end: 9000,
|
|
|
+ state: "green",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ // 单位
|
|
|
+ units: {
|
|
|
+ type: Array,
|
|
|
+ // default: () => ["健康趋势", "风机健康状态数量"],
|
|
|
+ default: () => ["(实时功率)", "(风速)"],
|
|
|
+ },
|
|
|
+ // 显示 legend
|
|
|
+ showLegend: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
+ },
|
|
|
+ // 颜色
|
|
|
+ color: {
|
|
|
+ type: Array,
|
|
|
+ default: () => ["#323E6F", "#1DA0D7", "#02BB4C", "#DB5520", "#EDB32F", "#EDEB2F"],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ id: "",
|
|
|
+ chart: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ legend () {
|
|
|
+ let data = [];
|
|
|
+ this.lineData.forEach((value, index) => {
|
|
|
+ data.push(value.text);
|
|
|
+ });
|
|
|
+ return data;
|
|
|
+ },
|
|
|
+ xAxisData () {
|
|
|
+ let data = [];
|
|
|
+ if (this.lineData.length > 0)
|
|
|
+ this.lineData[0].value.forEach((value, index) => {
|
|
|
+ data.push(value.text);
|
|
|
+ });
|
|
|
+ return data;
|
|
|
+ },
|
|
|
+ areaChartData () {
|
|
|
+ let data = [];
|
|
|
+ for (var i = 0; i < this.areaData.length; i++) {
|
|
|
+ let item = this.areaData[i];
|
|
|
+ var color = item.color || item.state;
|
|
|
+ data.push({
|
|
|
+ name: item.name,
|
|
|
+ value: [item.start, item.end, item.end - item.start],
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: color,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ exData: item,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return data;
|
|
|
+ },
|
|
|
+ areaMax () {
|
|
|
+ let max = 0;
|
|
|
+ this.areaData.forEach((value) => {
|
|
|
+ if (max < value.end) max = value.end;
|
|
|
+ });
|
|
|
+ return max;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ renderItem (params, api) {
|
|
|
+ var start = api.coord([api.value(0)]);
|
|
|
+ var end = api.coord([api.value(1)]);
|
|
|
+ var height = api.size([0, 1])[1];
|
|
|
+
|
|
|
+ var rectShape = echarts.graphic.clipRectByRect(
|
|
|
+ {
|
|
|
+ x: start[0],
|
|
|
+ y: start[1] - height / 2,
|
|
|
+ width: end[0] - start[0],
|
|
|
+ height: height,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ x: params.coordSys.x,
|
|
|
+ y: params.coordSys.y,
|
|
|
+ width: params.coordSys.width,
|
|
|
+ height: params.coordSys.height,
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
+ return (
|
|
|
+ rectShape && {
|
|
|
+ type: "rect",
|
|
|
+ transition: ["shape"],
|
|
|
+ shape: rectShape,
|
|
|
+ style: api.style(),
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ initChart () {
|
|
|
+ console.log("units:",this.units)
|
|
|
+ console.log("areaData:",this.areaData)
|
|
|
+ let that = this;
|
|
|
+ let chart = echarts.init(this.$el);
|
|
|
+
|
|
|
+ let option = {
|
|
|
+ color: this.color,
|
|
|
+ grid: {
|
|
|
+ left: 40,
|
|
|
+ right: 40,
|
|
|
+ bottom: 40,
|
|
|
+ top: 32,
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ show: true,
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ type: "cross",
|
|
|
+ },
|
|
|
+ backgroundColor: "rgba(0,0,0,0.4)",
|
|
|
+ borderColor: partten.getColor("gray"),
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 14,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show: this.showLegend,
|
|
|
+ data: this.legend,
|
|
|
+ right: 120,
|
|
|
+ icon: "ract",
|
|
|
+ itemWidth: 8,
|
|
|
+ itemHeight: 8,
|
|
|
+ inactiveColor: partten.getColor("gray"),
|
|
|
+ textStyle: {
|
|
|
+ color: partten.getColor("grayl"),
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ name: this.units[2],
|
|
|
+ axisLabel: {
|
|
|
+
|
|
|
+ color: partten.getColor("gray"),
|
|
|
+ },
|
|
|
+ // axisLine: {
|
|
|
+ // show: false,
|
|
|
+ // },
|
|
|
+ axisLine: {
|
|
|
+ type: "dashed",
|
|
|
+ lineStyle: {
|
|
|
+ color: partten.getColor("gray"),
|
|
|
+ },
|
|
|
+ width: 5,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ data: this.xAxisData,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ show: false,
|
|
|
+ min: 0,
|
|
|
+ max: this.areaMax,
|
|
|
+ axisLabel: {
|
|
|
+ show: false,
|
|
|
+ formatter: function (val) {
|
|
|
+ return Math.max(0, val - 0) + " ms";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ name: this.units[0],
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value} ",
|
|
|
+ color: partten.getColor("gray"),
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ type: "dashed",
|
|
|
+ lineStyle: {
|
|
|
+ color: partten.getColor("gray"),
|
|
|
+ },
|
|
|
+ width: 5,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ type: "dashed",
|
|
|
+ dashOffset: 10,
|
|
|
+ color: partten.getColor("gray") + 80,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ data: [this.areaData[0].name],
|
|
|
+ axisLabel: { show: false },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [],
|
|
|
+ };
|
|
|
+
|
|
|
+ // line data
|
|
|
+ if (this.lineData.length > 0) {
|
|
|
+ this.lineData.forEach((value, index) => {
|
|
|
+ console.log('valueTEXT:',value)
|
|
|
+ option.series.push({
|
|
|
+ name: value.text,
|
|
|
+ type: "line",
|
|
|
+ data: value.value,
|
|
|
+ smooth: true, //平滑展示
|
|
|
+ yAxisIndex: 0,
|
|
|
+ // lineStyle: {
|
|
|
+ // color: partten.getColor("green"),
|
|
|
+ // },
|
|
|
+ // itemStyle: {
|
|
|
+ // color: partten.getColor("green"),
|
|
|
+ // },
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 区域
|
|
|
+ if (this.areaData && this.areaData.length > 0) {
|
|
|
+ option.series.push({
|
|
|
+ type: "custom",
|
|
|
+ renderItem: this.renderItem,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ xAxisIndex: 1,
|
|
|
+ itemStyle: {
|
|
|
+ opacity: 0.2,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ show: false,
|
|
|
+ formatter: function (params) {
|
|
|
+ return params.marker + params.name + ": " + params.value[2] + "s";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ encode: {
|
|
|
+ x: [1, 2],
|
|
|
+ y: 0,
|
|
|
+ },
|
|
|
+ data: this.areaChartData,
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ chart.setOption(option);
|
|
|
+
|
|
|
+ return chart;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ emits: {
|
|
|
+ areaClick: null,
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.id = "pie-chart-" + util.newGUID();
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$el.style.width = this.width;
|
|
|
+ this.$el.style.height = this.height;
|
|
|
+ let that = this;
|
|
|
+ let chart = this.initChart();
|
|
|
+ chart.on("click", function(e, p) {
|
|
|
+ if (e.seriesType == "custom") {
|
|
|
+ that.$emit("areaClick", { data: e.data.exData });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ updated () {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.initChart();
|
|
|
+ });
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+.chart {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+</style>
|