chart组件添加

whyczyk

2021-03-03 f2a7ea7317e3e3e8737d8e6e4d979f033711ec7a

chart组件添加

 package-lock.json

Diff too large

 src/App.vue

@@ -5,7 +5,6 @@
</template>

<script>

export default {
    name: 'App',
    components: {
@@ -33,6 +32,7 @@
  background-color: #031D67;
  background-image: url("./assets/images/bg-box.png");
}

#app:before {
  display: table;
  content: " ";

 src/assets/images/page-bg.png

 src/assets/images/rectifier-img.png

 src/components/charts/abeamProChart.vue

New file
@@ -0,0 +1,186 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-content" ref="chart">

    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  //引入提示框
  import "echarts/lib/component/tooltip";
  export default {
    name: "abeamProChart",
    chart: "",
    chartData: [],
    props: {
      id: {
        require: true,
        type: String,
        default: "",
      },
    },
    data() {
      return {

      }
    },
    methods: {
      setOption(opt) {
        this.$options.chart.setOption(opt);
      },
      setData(sendData) {
        let dataColor = sendData.color;
        let bgColor = sendData.bgColor;
        let yData = sendData.yData;
        let radius = this.$refs.chart.clientHeight / 3 - 7;
        let data = sendData.data;
        let max = data[0];
        data.map(item => {
          if (item > max) {
            max = item;
          }
        });
        max = max - (max % 10) + 20;
        let maxData = []
        data.map(() => {
          maxData.push(max)
        });
        let option = {
          grid: {
            left: '2%',
            right: '5%',
            bottom: '0',
            top: '0',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'none'
            },
            formatter: function (params) {
              return params[0].name + ' : ' + params[0].value
            }
          },
          xAxis: {
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff'
              },
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
          },
          yAxis: [{
            type: 'category',
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff'
              },
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: yData
          }],
          series: [{
              name: '金额',
              type: 'bar',
              zlevel: 1,
              itemStyle: {
                color: function (params) {
                  return dataColor[params.dataIndex];
                },
                barBorderRadius: [0, radius, radius, 0],
              },
              barWidth: radius,
              barCategoryGap: "0%",
              data: data
            },
            {
              "name": "",
              type: 'pictorialBar',
              barCategoryGap: "0%",
              symbolPosition: 'end',
              symbolSize: [radius, radius],
              zlevel: 2,
              tooltip: {
                show: false
              },
              label: {
                normal: {
                  show: true,
                  position: 'insideRight',
                  fontSize: 20,
                  color: '#021750'
                }
              },
              itemStyle: {
                color: function (params) {
                  return dataColor[params.dataIndex];
                },
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                shadowBlur: 10,
                shadowOffsetX: -2
              },
              color: "#26B2E8",
              data: data
            },
            {
              name: '背景',
              type: 'bar',
              barCategoryGap: "0%",
              barGap: '-100%',
              barWidth: radius,
              data: maxData,
              itemStyle: {
                normal: {
                  color: function (params) {
                    return bgColor[params.dataIndex];
                  },
                }
              },
            },
          ]
        };
        // 设置配置项
        this.setOption(option);
      },
      resize() {
        this.$options.chart.resize();
      }
    },
    mounted() {
      // 基于准备好的dom，初始化echarts实例
      this.$options.chart = echarts.init(this.$refs.chart);

      window.addEventListener('resize', this.resize);
    },
    destroyed() {
      window.removeEventListener('resize', this.resize);
    }
  }
</script>

<style scoped>

</style>

 src/components/charts/imgPieChart.vue

New file
@@ -0,0 +1,191 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-content" ref="chart">

    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  //引入提示框
  import "echarts/lib/component/tooltip";
  const pieImg = require('../../assets/images/rectifier-img.png');
  export default {
    name: "imgPieChart",
    chart: "",
    chartData: [],
    props: {
      id: {
        require: true,
        type: String,
        default: "",
      },
    },
    data() {
      return {

      }
    },
    methods: {
      setOption(opt) {
        this.$options.chart.setOption(opt);
      },
      setData(sendData) {
        this.$options.chartData = sendData
        let imgWidth = this.$refs.chart.clientWidth * 0.14;
        let imgheight = imgWidth / 0.82;
        let centerx = this.$refs.chart.clientWidth / 2;
        let centery = this.$refs.chart.clientHeight / 2;
        let option = {
          color: ['#f3535f', '#7fc57c', '#ffcb29', '#f67f21'],
          graphic: [{
            zlevel: 5,
            type: 'image',
            left: centerx - imgWidth / 2,
            top: centery - imgheight / 2,
            bounding: 'raw',
            style: {
              image: pieImg,
              width: imgWidth,
              height: imgheight,
            }
          }],

          series: [{
              name: '业务警种',
              type: 'pie',
              radius: ['35%', '65%'],
              itemStyle: {
                normal: {
                  borderColor: '#021651',
                  borderWidth: 6,
                }
              },
              labelLine: {
                normal: {
                  length: 20,
                  length2: 0,
                  lineStyle: {
                    color: '#007ed3'
                  }
                }
              },
              label: {
                formatter: function (params) {
                  return '{white|' + params.name + '}\n{hr|}\n{yellow|' + params.value + '}';
                },
                distanceToLabelLine: 0,
                rich: {
                  yellow: {
                    color: "#f67f21",
                    fontSize: 16,
                    fontWeight: '600',
                    padding: [4, 0, 0, 0],
                    align: 'center'
                  },
                  white: {
                    color: "#ffffff",
                    align: 'center',
                    fontSize: 12,
                    padding: 4
                  },
                  hr: {
                    borderColor: '#007ed3',
                    width: '100%',
                    borderWidth: 1,
                    height: 0,
                  }
                }
              },
              data: sendData,
              zlevel: 1
            },
            {
              name: '',
              type: 'pie',
              radius: '50%',
              hoverAnimation: false,
              data: [{
                value: 20,
                name: ''
              }],
              label: {
                normal: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  color: 'rgba(7,56,128,0.2)'
                }
              },
              zlevel: 2
            },
            {
              name: '',
              type: 'pie',
              radius: '46%',
              hoverAnimation: false,
              data: [{
                value: 20,
                name: ''
              }],
              label: {
                normal: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  color: '#00b2e0'
                }
              },
              zlevel: 3
            },
            {
              name: '',
              type: 'pie',
              radius: '35%',
              hoverAnimation: false,
              data: [{
                value: 20,
                name: ''
              }],
              label: {
                normal: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  color: '#ffffff'
                }
              },
              zlevel: 4
            },
          ]
        };
        // 设置配置项
        this.setOption(option);
      },
      resize() {
        this.$options.chart.resize();
        this.setData(this.$options.chartData)
      }
    },
    mounted() {
      // 基于准备好的dom，初始化echarts实例
      this.$options.chart = echarts.init(this.$refs.chart);

      window.addEventListener('resize', this.resize);
    },
    destroyed() {
      window.removeEventListener('resize', this.resize);
    }
  }
</script>

<style scoped>

</style>

 src/components/charts/latticeBar.vue

New file
@@ -0,0 +1,181 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-content" ref="chart">

    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';

  export default {
    name: "latticeBar",
    chart: "",
    props: {
      id: {
        require: true,
        type: String,
        default: "",
      },
    },
    data() {
      return {

      }
    },
    methods: {
      setOption(opt) {
        this.$options.chart.setOption(opt);
      },
      setData(sendData) {
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function (item) {
              let str = item[0].axisValueLabel + '<br />';
              item.map(jtem => {
                if (jtem.seriesName !== 'bg') {
                  str += jtem.seriesName + ': ' + jtem.data + '<br />'
                }
              });
              return str
            }
          },
          legend: {
            top: '2%',
            textStyle: {
              color: '#ffffff',
            },
            data: ['访问量', '订单量']
          },
          grid: {
            top: 40,
            right: 20,
            left: 50,
            bottom: 30
          },
          xAxis: [{
            type: 'category',
            data: [],
            axisLine: {
              lineStyle: {
                color: '#007ed3'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#FFFFFF',
              fontSize: 12,
              interval: 0
            }
          }],
          yAxis: [{
            max: 200,
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#007ed3'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#FFFFFF'
              },
            },
          }],
          series: []
        };

        let max;
        sendData.series.map(item => {
          max = item.data[0];
          item.data.map(jtem => {
            if (jtem > max) {
              max = jtem;
            }
          })
        });
        option.yAxis[0].max = max;
        option.xAxis[0].data = sendData.xData;
        let legendData = [];
        sendData.series.map(item => {
          legendData.push(item.name);
        })
        option.legend.data = legendData;
        for (let i = 0; i < sendData.series.length; i++) {
          let maxArr = [];
          sendData.series[i].data.map(() => {
            maxArr.push(max)
          })
          let plusMinus = (i % 2);
          let offset;
          if (plusMinus == 0) {
            offset = '-65%'
          } else if (plusMinus == 1) {
            offset = '65%'
          }
          option.series.push({
            name: sendData.series[i].name,
            type: 'pictorialBar',
            symbol: 'roundRect',
            itemStyle: {
              color: sendData.series[i].color
            },
            symbolRepeat: true,
            symbolSize: ["16%", "4%"],
            symbolMargin: 2,
            symbolPosition: 'start',
            symbolOffset: [offset, 0],
            z: -20,
            data: sendData.series[i].data,
          });
          option.series.push({
            name: 'bg',
            type: 'pictorialBar',
            symbol: 'roundRect',
            itemStyle: {
              color: '#052b6c'
            },
            symbolRepeat: true,
            symbolSize: ["16%", "4%"],
            symbolMargin: 2,
            symbolPosition: 'start',
            symbolOffset: [offset, 0],
            z: -30,
            data: maxArr
          });
        }
        // 设置配置项
        this.setOption(option);
      },
      resize() {
        this.$options.chart.resize();
      }
    },
    mounted() {
      // 基于准备好的dom，初始化echarts实例
      this.$options.chart = echarts.init(this.$refs.chart);

      window.addEventListener('resize', this.resize);
    },
    destroyed() {
      window.removeEventListener('resize', this.resize);
    }
  }
</script>

<style scoped>

</style>

 src/components/charts/prossPieChart.vue

New file
@@ -0,0 +1,186 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-content" ref="chart">

    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  //引入提示框
  import "echarts/lib/component/tooltip";
  export default {
    name: "prossPieChart",
    chart: "",
    props: {
      id: {
        require: true,
        type: String,
        default: "",
      },
    },
    data() {
      return {

      }
    },
    methods: {
      setOption(opt) {
        this.$options.chart.setOption(opt);
      },
      setData(sendData) {
        let color = sendData.color;
        let data = sendData.data;
        let text;
        if (sendData.unit) {
          text = sendData.data + sendData.unit;
        } else {
          text = sendData.data
        }
        let title = sendData.title;
        let option = {
          title: {
            text: '{a|' + title + '}',
            x: 'center',
            bottom: '2%',
            textStyle: {
              rich: {
                a: {
                  fontSize: 16,
                  color: '#ffffff'
                },
              }
            },
            zlevel: 4
          },
          polar: {
            radius: ['65%', '57%'],
            center: ['50%', '40%'],
          },
          angleAxis: {
            max: 100,
            show: false,
          },
          radiusAxis: {
            type: 'category',
            show: true,
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: false,

            },
            axisTick: {
              show: false
            },
          },
          series: [{
              name: '',
              type: 'pie',
              radius: '75%',
              center: ['50%', '40%'],
              hoverAnimation: false,
              data: [{
                value: data,
                name: ''
              }],
              label: {
                normal: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  color: color
                }
              },
              zlevel: 1
            }, {
              name: '',
              type: 'pie',
              radius: '61%',
              center: ['50%', '40%'],
              hoverAnimation: false,
              data: [{
                value: data,
                name: ''
              }],
              label: {
                normal: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  color: 'transparent',
                  borderType: 'dashed',
                  borderColor: '#ffffff'
                }
              },
              zlevel: 2
            },
            {
              name: '',
              type: 'pie',
              radius: '61%',
              center: ['50%', '40%'],
              hoverAnimation: false,
              data: [{
                value: data,
                name: text
              }],
              label: {
                normal: {
                  show: true,
                  position: "center",
                  fontSize: 14,
                  fontWeight: '600',
                  color: '#ffffff'
                }
              },
              itemStyle: {
                normal: {
                  color: color,
                }
              },
              zlevel: 3
            }, {
              name: '',
              type: 'bar',
              center: ['50%', '40%'],
              roundCap: true,
              data: [data],
              coordinateSystem: 'polar',
              itemStyle: {
                normal: {
                  color: '#ffffff',
                }
              },
              zlevel: 4
            },
          ]
        };
        // 设置配置项
        this.setOption(option);
      },
      resize() {
        this.$options.chart.resize();
      }
    },
    mounted() {
      // 基于准备好的dom，初始化echarts实例
      this.$options.chart = echarts.init(this.$refs.chart);

      window.addEventListener('resize', this.resize);
    },
    destroyed() {
      window.removeEventListener('resize', this.resize);
    }
  }
</script>

<style scoped>

</style>

 src/components/charts/triangleBarChart.vue

New file
@@ -0,0 +1,184 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-content" ref="chart">

    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  //引入提示框
  import "echarts/lib/component/tooltip";
  export default {
    name: "triangleBarChart",
    chart: "",
    chartData: [],
    props: {
      id: {
        require: true,
        type: String,
        default: "",
      },
    },
    data() {
      return {

      }
    },
    methods: {
      setOption(opt) {
        this.$options.chart.setOption(opt);
      },
      setData(sendData) {
        let inData = []
        sendData.data.map(item => {
          inData.push(item - 10);
        })
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function (item) {
              let str = item[0].axisValueLabel;
              item.map(jtem => {
                if (jtem.seriesName == 'outData') {
                  str += ':' + jtem.data
                }
              });
              return str
            }
          },
          grid: {
            top: 40,
            right: 20,
            left: 50,
            bottom: 30
          },
          xAxis: [{
            type: 'category',
            data: sendData.xData,
            axisLine: {
              lineStyle: {
                color: '#007ed3'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#FFFFFF',
              fontSize: 12,
              interval: 0
            }
          }, {
            show: false,
            type: 'category',
            data: sendData.xData,
            axisLine: {
              lineStyle: {
                color: '#007ed3'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#FFFFFF',
              fontSize: 12,
              interval: 0
            }
          }],
          yAxis: [{
            splitLine: {
              lineStyle: {
                color: '#022664'
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#007ed3'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#FFFFFF'
              },
            },
          }],
          series: [{
            name: 'outData',
            type: 'pictorialBar',
            xAxisIndex: 0,
            data: sendData.data,
            barCategoryGap: "0%",
            barWidth: '50%',
            symbol: 'path://d="M150 50 L130 130 L170 130  Z',
            zlevel: 2,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
                    offset: 0,
                    color: "#65B3AD"
                  },
                  {
                    offset: 1,
                    color: "#9EFFDA"
                  }
                ]),
                opacity: 0.48
              },
            },
          }, {
            name: 'inData',
            type: 'pictorialBar',
            xAxisIndex: 1,
            data: inData,
            barCategoryGap: "0%",
            barWidth: '30%',
            symbol: 'path://d="M150 50 L130 130 L170 130  Z',
            zlevel: 1,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
                    offset: 0,
                    color: "#65B3AD"
                  },
                  {
                    offset: 1,
                    color: "#9EFFDA"
                  }
                ]),
                opacity: 1
              },
            },
          }]
        };
        // 设置配置项
        this.setOption(option);
      },
      resize() {
        this.$options.chart.resize();
      }
    },
    mounted() {
      // 基于准备好的dom，初始化echarts实例
      this.$options.chart = echarts.init(this.$refs.chart);

      window.addEventListener('resize', this.resize);
    },
    destroyed() {
      window.removeEventListener('resize', this.resize);
    }
  }
</script>

<style scoped>

</style>

 src/pages/zykTest.vue

New file
@@ -0,0 +1,165 @@
<template>
  <div class="zykTest">
    <div class="chartCon">
      <layout-box title="放电和充电电流">
        <lattice-bar id="latticeBar" ref="latticeBar"></lattice-bar>
      </layout-box>
    </div>
    <div class="chartCon">
      <layout-box title="整流器">
        <img-pie-chart id="ImgPieChart" ref="ImgPieChart"></img-pie-chart>
      </layout-box>
    </div>
    <div class="chartCon">
      <layout-box title="电池组">
        <triangle-bar-chart id="TriangleBarChart" ref="TriangleBarChart"></triangle-bar-chart>
      </layout-box>
    </div>
    <div class="chartCon">
      <layout-box title="电池状态">
        <div class="flexCon">
          <div class="con">
            <abeam-pro-chart id="AbeamProChart" ref="AbeamProChart"></abeam-pro-chart>
          </div>
        </div>
      </layout-box>
    </div>
    <div class="chartCon">
      <layout-box title="电源状态">
        <div class="chartItem">
          <pross-pie-chart id="ProssPieChart1" ref="ProssPieChart1"></pross-pie-chart>
        </div>
        <div class="chartItem">
          <pross-pie-chart id="ProssPieChart2" ref="ProssPieChart2"></pross-pie-chart>
        </div>
        <div class="chartItem">
          <pross-pie-chart id="ProssPieChart3" ref="ProssPieChart3"></pross-pie-chart>
        </div>
        <div class="chartItem">
          <pross-pie-chart id="ProssPieChart4" ref="ProssPieChart4"></pross-pie-chart>
        </div>
      </layout-box>
    </div>
  </div>
</template>

<script>
  import latticeBar from '../components/charts/latticeBar.vue'
  import LayoutBox from "@/components/LayoutBox";
  import ImgPieChart from '../components/charts/imgPieChart.vue';
  import TriangleBarChart from '../components/charts/triangleBarChart.vue';
  import AbeamProChart from '../components/charts/abeamProChart.vue';
  import ProssPieChart from '../components/charts/prossPieChart.vue';
  export default {
    components: {
      latticeBar,
      LayoutBox,
      ImgPieChart,
      TriangleBarChart,
      AbeamProChart,
      ProssPieChart
    },
    data() {
      return {

      }
    },
    mounted() {
      this.$refs.latticeBar.setData({
        xData: ['高告警数量', '告警总数', '告警总数比例', '告警机房总数', '告警机房数比例'],
        series: [{
          name: '放电',
          data: [120, 220, 150, 80, 70],
          color: '#90ec7d'
        }, {
          name: '充电',
          data: [80, 160, 120, 310, 50],
          color: '#ff6b6b'
        }]
      });
      this.$refs.ImgPieChart.setData([{
          value: 30,
          name: '整流器交流异常'
        },
        {
          value: 22,
          name: '整流器过流'
        },
        {
          value: 120,
          name: '总故障'
        },
        {
          value: 50,
          name: '整流器欠压'
        },
      ]);
      this.$refs.TriangleBarChart.setData({
        xData: ['熔断', '电压低', '下电', '充电过流'],
        data: [35, 72, 55, 45]
      });
      this.$refs.AbeamProChart.setData({
        yData: ['浮充数量', '放电数量', '充电数量'],
        color: ['#f58881', '#b4d465', '#ffcb29'],
        bgColor: ['rgba(245,136,129,0.35)', 'rgba(255,255,255,0.35)', 'rgba(255,203,41,0.35)'],
        data: [32, 15, 20]
      });
      this.$refs.ProssPieChart1.setData({
        title: '交流停电数量',
        data: 56,
        color: '#37a9b3'
      });
      this.$refs.ProssPieChart2.setData({
        title: '机房告警数',
        data: 12,
        color: '#f3535f'
      });
      this.$refs.ProssPieChart3.setData({
        title: '直流电压超限数',
        data: 21,
        unit: '%',
        color: '#ff8b00'
      });
      this.$refs.ProssPieChart4.setData({
        title: '负载熔断数量',
        data: 8,
        color: '#757ffb'
      });
    },
  }
</script>

<style scoped>
  .zykTest {
    width: 100%;
    height: 100%;
  }

  .chartCon {
    width: 33.33%;
    height: 50%;
    padding: 10px;
    float: left;
    box-sizing: border-box;
  }

  .flexCon {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .flexCon .con {
    width: 100%;
    height: 60%;
  }

  .chartCon .chartItem {
    width: 50%;
    height: 48%;
    float: left;
    margin-bottom: 2%;
  }
</style>

 src/router/routes.js

@@ -1,5 +1,4 @@
const routes = [
    {
const routes = [{
        path: '/',
        meta: {},
        component: (resolve)=>require(['@/pages/index.vue'], resolve)
@@ -25,6 +24,11 @@
        component: (resolve)=>require(['@/pages/test2.vue'], resolve)
    },
    {
        path: '/zykTest',
        meta: {},
        component: (resolve) => require(['@/pages/zykTest.vue'], resolve)
    },
    {
        path: '*',
        meta: {},
        component: (resolve)=>require(['@/pages/404.vue'], resolve)