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

import { bigNumberTransform } from "@/utils/gol/dataTool"
import * as echarts from "echarts";
export default function createOptLight(firstData = [], secondData = [], percent = []) {
    return {
        tooltip: {
            trigger: "axis",
            backgroundColor: "#08182F",
            axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
            },
            borderColor: "#3373CC",
            textStyle: {
                color: "#fff", //设置文字颜色
            },
            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
          },
          grid: {
            left: 10,
            right: 10,
            bottom: 10,
            containLabel: true
          },
          legend: {
              textStyle: { //图例文字的样式
                color: '#000',
                fontSize: 10
              },
              y: 10,
              x: 10,
              itemWidth: 12,
              itemHeight: 12,
              borderRadius: 1, //圆角半径
          },
          xAxis: [
            {
              type: 'category',
              data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
              axisPointer: {
                type: 'shadow'
              },
              axisLabel: {
                color: '#000'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                formatter: (value) => {
                    return bigNumberTransform(value);
                },
                color: '#000'
              },
              splitLine:{
                show:false
              },
            },
            {
              type: 'value',
              axisLabel: {
                formatter: '{value}%',
                color: '#000'
              },
              splitLine:{
                show:false
              },
            }
          ],
          series: [
            {
              name: '2021',
              type: 'bar',
              barWidth: 20,
              tooltip: {
                valueFormatter: function (value) {
                  return value;
                }
              },
              itemStyle: {
                normal: {
                  //柱体的颜色
                  //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
                  color: function () {
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: '#3373CC'
                      },
                      {
                        offset: 1,
                        color: '#3E8CF940'
                      }
                    ], false);
                  }
                }
              },
              label: {
                show: true,
                position: 'top',
                color: '#000'
              },
              data: firstData
            },
            {
              name: '2022',
              type: 'bar',
              barWidth: 20,
              tooltip: {
                valueFormatter: function (value) {
                  return value;
                }
              },
              itemStyle: {
                normal: {
                  //柱体的颜色
                  //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
                  color: function () {
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: '#54BF93'
                      },
                      {
                        offset: 1,
                        color: '#61DDAA30'
                      }
                    ], false);
                  }
                }
              },
              label: {
                show: true,
                position: 'top',
                color: '#000'
              },
              data: secondData
            },
            {
              name: '同比',
              type: 'line',
              yAxisIndex: 1,
              tooltip: {
                valueFormatter: function (value) {
                  return value+'%';
                }
              },
              data: percent
            }
          ]
    }
}