carInsightSystem/src/views/BrandInsight/titsopo/opt.js

/*
 * @Author: your name
 * @Date: 2021-10-12 10:11:24
 * @LastEditTime: 2021-12-29 17:08:53
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js
 */
import * as echarts from "echarts";
import { bigNumberTransform } from "@/utils/gol/dataTool"
import {doStr} from "@/utils/gol/dataTool"
let colors = ['#546fc5', '#91cb74', '#f9c857', '#ed6565', '#72bfde', '#3aa272', '#fb8351'];
let dataURI = 'path://M512 149.333333c200.298667 0 362.666667 162.368 362.666667 362.666667s-162.368 362.666667-362.666667 362.666667S149.333333 712.298667 149.333333 512 311.701333 149.333333 512 149.333333z m32 298.666667h-64v256h64V448z m0-106.666667h-64v64h64v-64z'
function createData(ds = [], hotIndex = []) {
    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: 'line',
                    symbol: 'none',
                    areaStyle: {
                        normal: {
                            opacity: 0.4,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0, color: colors[j] // 0% 处的颜色
                            }, {
                                offset: 1, color: '#000' // 100% 处的颜色
                            }]
                            ),
                        }
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [arr1[j].value],
                    markPoint: {
                        data: [],
                    }
                }
                arr.push(obj)
            } else {
                arr[n].data.push(arr1[j].value)
            }
        }
    };
    //设定标记点
    hotIndex.forEach(e => {
        let yMax = 0; //y轴
        let colorMax = 0; //颜色的索引
        for(let i = 0; i<arr.length; i++){
            if(arr[i].data[e] * 1 > yMax){
                yMax = arr[i].data[e];
                colorMax = i;
            }
        }
        arr.forEach(ele => {
            ele.markPoint.data.push(
                {
                    name: 'Max',
                    xAxis: e, yAxis: yMax,
                    symbol: dataURI,
                    symbolSize: 16,
                    symbolOffset: [0, '-75%'],
                    itemStyle: {color: colors[colorMax]},
                }
            )
        })
    })
    return arr;
}
export default function createOpt(dx = [], ds = [], hotTopArr=[], hotIndex = []) {
    let data = createData(ds, hotIndex)
    return {
        grid: {
            left: '3%',
            right: '5%',
            bottom: '3%',
            top: '15%',
            containLabel: true
        },
        tooltip: {
            trigger: "axis",
            backgroundColor: "#08182F",
            color: "#fff",
            borderColor: "#3373CC",
            textStyle: {
                color: "#fff", //设置文字颜色
            },
            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;width: 200px",
            formatter: function(param) {
                let htmlStr = `<div>${param[0].name}</div>`;
                let hotTop = hotTopArr.find(ele => param[0].name === ele.label).hotTop;
                hotTop.forEach(e => { 
                    htmlStr += `<div style="width: 200px">热门：${doStr(e.title, 18)}</div>` 
                })
                for(let i = 0; i < param.length; i++) {
                    htmlStr += `<div style="display: flex;justify-content: space-between;"><span>${param[i].marker}${param[i].seriesName} </span><span>${param[i].value}</span></div>`
                }
                return htmlStr
            }
        },
        legend: {
            icon: 'roundRect',
            textStyle: { //图例文字的样式
                color: '#fff',
                fontSize: 10,
            },
            y: 12,
            x: 16,
            itemWidth: 12,
            itemHeight: 12

        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: "#fff",
                },
            },
            axisLabel: {
                formatter: (value) => {
                    let rex = "00:00:00";
                    let isCont = false;
                    let str = value;
                    for(let i = 0;i<dx.length-1;i++){
                        //连续两条带小时
                        if(dx[i].indexOf(rex) === -1 && dx[i+1].indexOf(rex) === -1){
                            isCont = true;
                            break;
                        }
                    }
                    if(isCont == true) {
                        str = value.substring(10, 16)
                    } else {
                        str = value.substring(5, 10)
                    }
                    return str;
                }
            },
            data: dx
        },
        yAxis: {
            type: 'value',
            axisLine: {
                show: false,
                lineStyle: {
                    color: "#fff",
                },
            },
            axisLabel: {
                formatter: (value) => {
                    let str = bigNumberTransform(value);
                    return str;
                }
            },
            splitLine: {
                lineStyle: {
                    type: "dashed", // y轴分割线类型
                    color: "#012b4b",
                },
            },
        },
        series: data
    }
}