shuichacha/shuichacha-for-KL/utils/chart.js

import * as echarts from '../components/ec-canvas/echarts';
const app = getApp();
const scale = app.scale;

export const barChartOptions = ({
  legend = [],
  xAxis = [],
  series = []
}, colors = ['#FFF'], configs = { barWidth: 48 }) => ({
  color: ['#FFF'],
  tooltip: {
    show: false,
    trigger: 'axis',
    backgroundColor: '#FFFFFF',
    textStyle: {
      color: '#2596FF',
    },
    formatter: '用水量: {c0}吨',
    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
      type: 'shadow',        // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  grid: {
    left: 0,
    right: Math.round(10 * scale),
    bottom: Math.round(70 * scale),
    top: Math.round(40 * scale),
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: xAxis,
      axisLabel: {
        color: '#FFF',
        fontSize: Math.round(22 * scale)
      },
      axisTick: {
        alignWithLabel: true
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitNumber: 7
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisLabel: {
        color: '#FFF',
        fontSize: Math.round(22 * scale)
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255,255,255,0.6)',
          width: 0.5
        }
      }
    }
  ],
  series: [
    {
      name: '用水量',
      type: 'bar',
      barWidth: Math.round(configs.barWidth * scale),
      data: series[0],
      itemStyle: {
        color(params) {
          const arr = series[0];
          var max = Math.max(...arr);
          var min = Math.min(...arr);
          const { value } = params;
          if (value == max) {
            return '#80FDF6';
          } else if (value == min) {
            return '#A9FFC5';
          }
          return '#D3ECFF';
        },
        barBorderRadius: [Math.round(4 * scale), Math.round(4 * scale), 0, 0]
      },
      label: {
        show: true, //开启显示
        position: 'top', //在上方显示
        distance: 10,
        verticalAlign: 'middle',
        rotate: 30,
        align: 'center',
        textStyle: { //数值样式
          color(params) {
            const arr = series[0];
            var max = Math.max(...arr);
            var min = Math.min(...arr);
            const { value } = params;
            if (value == max) {
              return '#80FDF6';
            } else if (value == min) {
              return '#A9FFC5';
            }
            return '#FFF';
          },
          fontSize: Math.round(22 * scale)
        },
        formatter(val) {
          return val.data ? val.data : '';
        }
      }
    }
  ]
})

export const lineChartOptions = ({
  legend = [],
  xAxis = [],
  series = []
}, colors = ['#FFF']) => ({
  color: colors,
  tooltip: {
    trigger: 'axis',
    backgroundColor: '#FFFFFF',
    textStyle: {
      color: '#2596FF',
    },
    formatter: '{b0}\n{a}: {c0}吨',
    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
      type: 'line',        // 默认为直线，可选为：'line' | 'shadow'
      lineStyle : {
        color: 'rgba(255, 255, 255, 0.6)',
      },
      /* label: {
        show: true,
        color: '#2596FF',
        backgroundColor: 'rgba(255, 255, 255, 0.6)',
        padding: Math.round(4 * scale)
      } */
    }
  },
  grid: {
    left: 0,
    right: 0,
    bottom: Math.round(60 * scale),
    top: Math.round(40 * scale),
    containLabel: true
  },
  legend: {
    show: false,
  },
  xAxis: {
    type: 'category',
    data: xAxis,
    axisLabel: {
      color: '#FFF',
      fontSize: Math.round(22 * scale)
    },
    axisTick: {
      alignWithLabel: true
    },
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    }
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      color: '#FFF',
      fontSize: Math.round(22 * scale)
    },
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    splitLine: {
      lineStyle: {
        type: 'dashed',
        color: 'rgba(255,255,255,0.6)',
        width: 0.5
      }
    }
  },
  series: [{
    name: legend[0],
    type: 'line',
    smooth: true,
    data: series[0],
    showSymbol: false,
    areaStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(
          0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(255,255,255,0.15)'
          },
          {
            offset: 0.5,
            color: 'rgba(213,246,253,0.2)'
          },
          {
            offset: 1,
            color: 'rgba(108,160,255,1)'
          }
          ]
        )
      }
    },
    lineStyle: {
      color: '#fff',
      width: Math.round(2 * scale)
    }
  }, legend.length > 1 && {
    name: legend[1],
    type: 'line',
    smooth: true,
    data: series[1],
    symbol: 'none',
    areaStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(
          0, 0, 0, 1, [{
            offset: 0,
            color: colors[1]
          },
          {
            offset: 1,
            color: '#fff'
          }
          ]
        )
      }
    },
  }]
})