ChartBarPic.vue

<!-- 柱状 - 方格 -->
<template>
    <div :id="id" class="chart" />
</template>

<script>
    import ChartBase from '@/components/Base/ChartsBase.js';
    import {
        ChartStyle
    } from '@/common/const.js';
    import {
        getWarnColor,
        sliceString
    } from '@/common/util.js';

    export default {
        mixins: [ChartBase],
        methods: {
          setOptions(chartData) {
              if (!this.chart || !chartData) return;
              let option = {
                  tooltip: {
                      // formatter: params => {
                      //     if (!params.value) return '';
                      //     let str = params.value.toString();
                      //     return parseFloat(str.substr(0, str.length - 2));
                      // }
                  },
                  xAxis: {
                      type: 'category',
                      data: chartData.xAxis || chartData.xaxis,
                      axisLine: {
                          lineStyle: {
                              color: ChartStyle.axis.color,
                          }
                      },
                      axisTick: {
                          show: false
                      },
                      axisLabel: {
                          fontSize: ChartStyle.axis.fontSize,
                          lineHeight: ChartStyle.axis.lineHeight,
                          formatter(value, index) {
                              return sliceString(value, 6);
                          }
                      }
                  },
                  yAxis: {
                      splitNumber: 3,
                      axisLine: {
                          show: false
                      },
                      axisTick: {
                          show: false
                      },
                      axisLabel: {
                          color: ChartStyle.axis.color,
                          fontSize: ChartStyle.axis.fontSize
                      },
                      splitLine: {
                          lineStyle: {
                              color: ChartStyle.split.color,
                              type: 'dashed',
                              opacity: ChartStyle.split.opacity,
                          }
                      }
                  },
                  grid: {
                      top: '18%',
                      left: '2%',
                      right: '2%',
                      bottom: '1%',
                      containLabel: true
                  },
                  series: [],
                  animationDurationUpdate: 500,
              };
              for (let i = 0, len = chartData.dataList.length; i < len; i++) {
                  const item = chartData.dataList[i];
                  option.series.push({
                      type: 'bar',
                      data: item.value,
                      showBackground: true,
                      backgroundStyle: {
                          color: 'rgba(0, 0, 0, 0.1)'
                      },
                      itemStyle: {
                          color: 'transparent'
                      },
                      barMaxWidth: 25,
                  });
                  option.series.push({
                      type: 'pictorialBar',
                      symbol: 'rect',
                      symbolRepeat: true,
                      symbolSize: ['90%', '18%'],
                      symbolMargin: 1.5,
                      symbolOffset: [0, -2],
                      symbolRepeatDirection: 'end',
                      name: item.name,
                      data: item.value,
                      label: {
                          show: true,
                          position: 'top',
                          color: ChartStyle.label.color,
                          fontSize: ChartStyle.label.fontSize,
                          // formatter: params => {
                          //     if (!params.value) return '';
                          //     let str = params.value.toString();
                          //     return parseFloat(str.substr(0, str.length - 2));
                          // }
                      },
                      itemStyle: {
                          normal: {
                              // 最后两位为信号状态
                              color: params => {
                                  // return getWarnColor(params.value?.toString().substr(-2));
                                  return getWarnColor(item.state[params.dataIndex]);
                              }
                          }
                      },
                      barMaxWidth: 25,
                  });
                  option.series.push({
                      type: 'line',
                      name: item.name,
                      data: item.value,
                  });
              }
              this.chart.setOption(option);
          },
            // setOptions(chartData) {
            //     if (!this.chart || !chartData) return;
            //     let option = {
            //         tooltip: {
            //             formatter: params => {
            //                 if (!params.value) return '';
            //                 let str = params.value.toString();
            //                 return parseFloat(str.substr(0, str.length - 2));
            //             }
            //         },
            //         title: [],
            //         xAxis: [],
            //         yAxis: [],
            //         series: [],
            //         grid: [],
            //         animationDurationUpdate: 500,
            //     };
            //     // 找到最大值,作为单轴时y轴的最大值
            //     let yMax;
            //     for (let i = 0; i < chartData.length; i++) {
            //         for (let j = 0; j < chartData[i].dataList.length; j++) {
            //             for (let k = 0; k < chartData[i].dataList[j].value.length; k++) {
            //                 if(!yMax || yMax < chartData[i].dataList[j].value[k]) yMax = chartData[i].dataList[j].value[k];
            //             }
            //         }
            //     }
            //     for (let i = 0, len = chartData.length; i < len; i++) {
            //         option.title.push({
            //             text: '{a| }   ' + chartData[i].title,
            //             textStyle: {
            //                 color: ChartStyle.title.color,
            //                 fontSize: ChartStyle.title.fontSize,
            //                 // width: '100%',
            //                 fontWeight: 200,
            //                 rich: {
            //                     a: {
            //                         width: 5,
            //                         height: 5,
            //                         backgroundColor: ChartStyle.title.color,
            //                         borderRadius: 50,
            //                         shadowColor: 'rgba(147,252,255,0.30)',
            //                         shadowBlur: 5,
            //                     }
            //                 }
            //             },
            //             left: 100 / len / 2 + (100 / len) * i - 1 + '%',
            //             top: '3',
            //             textAlign: 'center'
            //         });
            //         option.xAxis.push({
            //             data: chartData[i].xAxis,
            //             axisLine: {
            //                 lineStyle: {
            //                     color: ChartStyle.axis.color,
            //                 }
            //             },
            //             axisTick: {
            //                 show: false
            //             },
            //             axisLabel: {
            //                 color: ChartStyle.axis.color,
            //                 fontSize: ChartStyle.axis.fontSize
            //             },
            //             gridIndex: i
            //         });
            //         option.yAxis.push({
            //             max: yMax * 1.2, // 单轴
            //             axisLine: {
            //                 show: false
            //             },
            //             axisTick: {
            //                 show: false
            //             },
            //             axisLabel: {
            //                 show: false
            //             },
            //             splitLine: {
            //                 show: false
            //             },
            //             gridIndex: i
            //         });
            //         option.grid.push({
            //             top: '20%',
            //             left: (100 / len) * i + 5 + '%',
            //             right: (100 / len) * (len - i - 1) + 5 + '%',
            //             bottom: '5%',
            //             containLabel: true
            //         });
            //         for (let j = 0; j < chartData[i].dataList.length; j++) {
            //             option.series.push({
            //                 type: 'bar',
            //                 data: chartData[i].dataList[j].value,
            //                 showBackground: true,
            //                 backgroundStyle: {
            //                     color: 'rgba(0, 0, 0, 0.1)'
            //                 },
            //                 itemStyle: {
            //                     color: 'transparent'
            //                 },
            //                 barMaxWidth: 25,
            //                 xAxisIndex: i,
            //                 yAxisIndex: i
            //             });
            //             option.series.push({
            //                 type: 'pictorialBar',
            //                 symbol: 'rect',
            //                 symbolRepeat: true,
            //                 symbolSize: ['90%', '18%'],
            //                 symbolMargin: 1.5,
            //                 symbolOffset: [0, -2],
            //                 symbolRepeatDirection: 'end',
            //                 name: chartData[i].dataList[j].name,
            //                 data: chartData[i].dataList[j].value,
            //                 // label: {
            //                 //     show: true,
            //                 //     position: 'top',
            //                 //     color: ChartStyle.label.color,
            //                 //     fontSize: ChartStyle.label.fontSize
            //                 //     formatter: params => {
            //                 //         if (!params.value) return '';
            //                 //         let str = params.value.toString();
            //                 //         return str.substr(0, str.length - 2);
            //                 //     }
            //                 // },
            //                 itemStyle: {
            //                     normal: {
            //                         // 最后两位为信号状态
            //                         color: params => {
            //                             return getWarnColor(params.value?.toString().substr(-2));
            //                         }
            //                     }
            //                 },
            //                 barMaxWidth: 25,
            //                 xAxisIndex: i,
            //                 yAxisIndex: i
            //             });
            //         }
            //     }
            //     this.chart.setOption(option);
            // },
        }
    };
</script>

<style lang="scss" scoped>
    .chart {
        width: 100%;
        height: 100%;
    }
</style>