trentChart.vue

<template>
  <div>
    <basic ref="basic" :chartId="chartId" :chartData="chartData"></basic>
  </div>
</template>
<script>
import mixin from './mixin';
import { chartweather, weatherpng } from '@/components/Charts/weather'
export default {
  mixins: [mixin],
  data() {
    return {

    }
  },
  methods: {
    addNextTime(timeStr, nextTimeNum) {
      let start = timeStr,
        matchtTime = timeStr.split(":"),
        endTime;

      endTime = nextTimeNum
        ? matchtTime[1] - 0 + nextTimeNum < 60
          ? matchtTime[0] + ":" + (matchtTime[1] - 0 + nextTimeNum)
          : matchtTime[0] - 0 + 1 + ":" + "00"
        : (matchtTime[0] > 8
            ? matchtTime[0] - 0 + 1
            : "0" + (matchtTime[0] - 0 + 1)) +
          ":" +
          matchtTime[1];
      return `${start}-${endTime}`;
    },
    /**
     * 预处理option参数
     * */
    preChartData(option) {

      let trData = [],
        oriData = [];
      (option.series || []).map((ele, i) => {
        if (ele.name == "天气" || ele.name == "温度") {
          oriData.push(ele);
        } else {
          ele.smooth = true;
          trData.push(ele);
        }
      });
      if (oriData.length) option.otherConf.oriData = oriData;
      option.series = trData;
      return option;
    },
    /**
     * 处理option参数
     * */
    dealChartData(optionFormat) {

      let {
        normalXAxisLabel,
        grid,
        hasBoundaryGap = false,
        _color,
        isYear,
        perUnit = painter.$t('format.perTime'),
        doubleYaxis = false,
        showLineArea = true,
        periodTime,
        nextTimeNum,
        legendShow,
        legendBottom,
        seriesText,
        oriData,
        calcPercent
      } = optionFormat.otherConf;
      optionFormat.legend.show = legendShow || true;
      let _colors =
        _color || this.getRandomColors(optionFormat.series.length);
      let areaColor = _colors.map(item => {
        return {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0,
              color: item // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#fff" // 100% 处的颜色
            }
          ]
        };
      });
      let _grid = { top: 40, right: 40, bottom: 60, left: 70 };
      // 覆盖格式化后的`option`数据 按需修改
      let coverTemp = {
        color: _colors, // ["#87D14B", "#3BB8FF", "#FFC62E", "#FF9631", "#7460EE"]
        grid: grid || _grid
      };
     
      if(doubleYaxis){
          optionFormat.yAxis.name = this.$t('format.perTime');
          optionFormat.yAxis = [JSON.parse(JSON.stringify(optionFormat.yAxis)),JSON.parse(JSON.stringify(optionFormat.yAxis))]
          optionFormat.yAxis[1].name = '增长率%';
          optionFormat.yAxis[1].nameLocation = 'end';
      }else/* if(optionFormat.series.length==1)*/{
          optionFormat.yAxis.name = perUnit;
          optionFormat.yAxis.nameLocation = 'end';
      }

      if(!showLineArea){
         optionFormat.yAxis.axisLine.show = false;
      }
      optionFormat.series.forEach((item, index) => {
        if (item.type === "bar") {
           if(item.data.length<20)item.barWidth = 50;
        } else {
          if(showLineArea){
            item.showSymbol = true;
            item.symbolSize = 6;
            item.areaStyle = {
              normal: {
                color: areaColor[index]
              }
            };
          }else{
            item.showSymbol = true;
            item.symbol = 'circle';
            item.symbolSize = 6;
          }
          if(doubleYaxis){
            item.yAxisIndex = 1;
            item.areaStyle.normal.opacity = 0;
          }
        }
      });
      optionFormat.xAxis.boundaryGap = hasBoundaryGap;
      //optionFormat.xAxis.axisLabel.interval = optionFormat.series[0].length>30?'auto':0;
      optionFormat.legend.bottom = legendBottom || 0;
      optionFormat.tooltip.trigger = "axis";
      optionFormat.tooltip.axisPointer = {
        type: "line",
        animation: false,
        lineStyle: {
          color: "#444"
        }
      };
      
      let option = Object.assign({}, optionFormat, coverTemp);
      let _dataZoom = [{
          type: "slider",
          throttle: 0
        },
        {
          type: "inside",
          throttle: 0
        }
      ];
      if (isYear) {
        _dataZoom[0].bottom = 0;
        _dataZoom[0].start = 90
        _dataZoom[0].end = 100
        _dataZoom[0].handleSize = 1;
        option.dataZoom = _dataZoom;
      }
      let temperature, wather;
      if (oriData) {
        //获取温度和天气数组
        oriData.map(ele => {
          if (ele.name == '温度') {
            temperature = ele
          } else {
            wather = ele;
          }
        })
      }
      option.tooltip.formatter = params => {
        let axisText, seriesName;
        if (periodTime) {
          axisText = this.addNextTime(params[0].axisValue, nextTimeNum);

        } else {
          let time,
            nextTime,
            regex = /\d{2}\:\d{2}$/;
          if (regex.test(params[0].axisValue)) {
            time = Number(params[0].axisValue.split(":")[0]);
            nextTime = time > 8 ? time + 1 + ":00" : "0" + (time + 1) + ":00";
          }
          axisText = params[0].axisValue + (nextTime ? "-" + nextTime : "");
        }
        //x轴显示天气
        // optionFormat.xAxis.textStyle.lineHeight = 14
        let temperaturetext, tem, cweather;
        let htmls = "";
        if (oriData) {
          htmls = `<div style="font-size:14px;height:24px;color:#333;font-weight:500;border-radius:4px;line-height:20px;padding-left:15px;padding-right:15px; text-align: left;">${axisText}</div><div>`;
        } else {
          htmls = `<div style="font-size:14px;color:#333;border-radius:4px;line-height:20px;padding-left:15px;padding-right:15px; text-align: left;">${axisText}</div><div>`;
        }
        let dataList = []
        let dataPercent = 0
        params.forEach((item, index) => {
          htmls += `<p style="font-size:13px;padding:0px 15px 0px;color:#444444; text-align: left;font-weight:500;">${item.marker} ${item.seriesName}<br><span style="color:#5A8DEE;font-size:20px;margin-right:2px;">${item.data?this.toThousands(item.data):"--"}</span>${
            item.seriesType=='line'&&doubleYaxis?'%':item.seriesType=='bar'?'':perUnit
          }</p>`;
        });
        if (calcPercent && dataList.length > 1) {
          dataList.forEach(item => {
            dataPercent = dataPercent !== 0 ?
              dataPercent / item :
              (item || '0')
          })
          // htmls += `
          //   <p style="font-size:13px;padding:4px 15px;color:#444444; text-align: left;">
          //     ${marks} ${this.$t('echarts.lossCustomerRatio')}: ${dataPercent ? (dataPercent * 100).toFixed(2) : '--'}%
          //   </p>
          // `
        }
        htmls += "</div>";
        return htmls;
      };
      let windex = 0;
      if (oriData) {
        optionFormat.xAxis.axisLabel.formatter = function(val, index) {
          let i = wather.data[index];
          let t = temperature ? temperature.data[index] : '';
          return val + '\n{weather' + i + '|}{temp|' + (t ? t + '℃' : '') + '}';
        }
        let richObj = {
          temp: {
            verticalAlign: 'middle',
            padding: [0, 0, 0, 5],
          }
        };
        Object.keys(weatherpng).map(ele => {
          richObj['weather' + ele] = {
            height: 20,
            align: 'center',
            backgroundColor: {
              image: weatherpng[ele] //这个warnImg是上面定义的图片var warnImg = "img/warn.png";
            }
          }
        })
        optionFormat.xAxis.axisLabel.rich = richObj
      }
      return option;
    }
  },
  created() {

  }
}

</script>
<style scoped>
</style>