carInsightSystem/src/views/SaleRank/MarketSaleChina/mscTotal/totalTop20/optLight.js

/*
 * @Author: your name
 * @Date: 2021-10-09 11:01:19
 * @LastEditTime: 2021-12-23 16:37:35
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
 */
import * as echarts from "echarts";
import {doStr} from "@/utils/gol/dataTool"
import { bigNumberTransform } from "@/utils/gol/dataTool"
// let colors = ['rgba(84,111,197,1)', 'rgba(145,203,116,1)', 'rgba(90,203,156,1)', 'rgba(248,200,87,1)', 'rgba(237,101,101,1)', "rgba(114,191,222,1)", 'rgba(58,162,114,1)', 'rgba(251,131,81,1)']
// let colors2 = ['rgba(84,111,197,0.6)', 'rgba(145,203,116,0.6)', 'rgba(90,203,156,0.6)', 'rgba(248,200,87,0.6)', 'rgba(237,101,101,0.6)', "rgba(114,191,222,0.6)", 'rgba(58,162,114,0.6)', 'rgba(251,131,81,0.6)']
let colors = ['#5B8FF9','#7DAAFF','#9AC5FF','#B9E2FF','#3A9EC0','#5BB9DB','#78D4F8','#63AECC','#19A576','#43C090','#43C090','#9DF5CA']
function createData(ds = []) {
  let arr = [];
  for (let i = 0; i < ds.length; i++) {
    let arr1 = ds[i];
    for (let j = 0; j < arr1.length; j++) {
      let n = arr.findIndex(ele => {
        return ele.name === arr1[j].Key;
      })
      if (n === -1) {
        let obj =
        {
          name: arr1[j].Key,
          type: 'bar',
          stack: 'total',
          barWidth: 18,
          barGap: "-100%",
          emphasis: {
            focus: 'series'
          },
          itemStyle: {
            normal: {
              //柱体的颜色
              //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
              color: function () {
                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: colors[j]
                  },
                  {
                    offset: 1,
                    color: colors[j]
                  }
                ], false);
              }
            }

          },
          data: [arr1[j].Value]
        }
        arr.push(obj)
      } else {
        arr[n].data.push(arr1[j].Value)
      }
    }
  }
  return arr;
}
export default function createOptLight(dx = [], ds = []) {
  const data = createData(ds);
  return {
    grid: {
      left: 10,
      right: 10,
      bottom: 10,
      containLabel: true
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "#08182F",
      color: "#fff",
      borderColor: "#3373CC",
      textStyle: {
        color: "#fff", //设置文字颜色
      },
      extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
    },
    color: colors,
    legend: {
      textStyle: { //图例文字的样式
        color: '#000',
        fontSize: 10
      },
      y: 10,
      x: 10,
      itemWidth: 12,
      itemHeight: 12,
      borderRadius: 1, //圆角半径
    },
    xAxis: {
      type: 'category',
      axisLabel :{  
          interval:0, 
          formatter: (value) => {
              let res = doStr(value, 8);
              return res
          }
      }, 
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "#000",
        },
      },
      data: dx
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false,
        lineStyle: {
          color: "#000",
        },
      },
      axisLabel: {
        formatter: (value) => {
          let str = bigNumberTransform(value);
          return str;
        }
      },
      splitLine: {
        lineStyle: {
          type: "dashed", // y轴分割线类型
          color: "#012b4b",
        },
      },
    },
    series: data
  }

}