行情折线图

for example:

or :

and or:

啦啦啦，你可以选择用svg（之前有一篇文件写过）

嘎嘎嘎，你也可以选择用echarts(真香)

util.js传送（这里用到了加、乘）

js:

// 导入（这里可以根据需要画图类型按需导入，这里是直接导入的）
import * as echarts from "echarts";
// 初始化echarts
intiEcharts(arr, index) {
    // 空，数组长度为0、1直接reture
    if (!arr || !arr.length || arr.length < 2) return;
    // 找到最小值（方便把填充区域以0为标准以上填充，echart（5.3.2以上）版本可以设置填充区域：arigin:number）
    let min = parseFloat(Math.min.apply(null, arr));
    // 后端传来的没个数组数据，全部加到0以上
    if (min < 0) {
        arr = arr.map((item, index1) => {
            return (item = util.add(item, -min));
        });
    }
    // 这里是循环列表，选中循环列表dom元素
    let idname = "myechart" + index;
    let chartDom = document.getElementById(idname);
    let myChart = echarts.init(chartDom);
    //设置配置项
    let option;
    let xData = [];
    for (let i = 0; i < arr.length; i++) {
        let x = (80 / arr.length) * i; // 获取等间距的坐标，从0开始
        xData.push(x);
    }
    option = {
        grid: {
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
        },
        xAxis: {
            type: "category",
            min: "dataMin",
            max: "dataMax",
            boundaryGap: false,
            data: xData,
            show: false,
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
            },
        },
        yAxis: {
            type: "value",
            position: "right",
            min: "dataMin",
            max: "dataMax",
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
            },
        },
        series: [
            {
                data: arr,
                type: "line",
                smooth: true,
                symbol: "none",
                lineStyle: {
                    color: "#1c16f7",
                    width: 1,
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "#c3c7ff",
                                },
                                {
                                    offset: 1,
                                    color: "#fff",
                                },
                            ]
                        ),
                    },
                    origin: "end",
                },
            },
        ],
    };
    myChart.setOption(option);
},

结构

<div class="list" v-for="(item, index) in recomList" :key="index">
    <div :id="`myechart${index}`" style="width: 80px; height: 40px"></div>
</div>

后端请求数据

// item.profitList:[-0.0014, -0.0004, 0.0072, 0.0035, 0.0079]类似于这种
this.$request1(params)
    .then((res) => {
                    if (res.code == 200 && res.success) {
                        this.recomList = res.result;
                        if (this.recomList.length) {
                            // 这里处理循环生成结构第一时间拿不到dom元素
                            setTimeout(() => {
                                this.recomList.forEach((item, index) => {
                                    this.intiEcharts(item.profitList, index);
                                });
                            }, 0);
                        }
                    }
                })
    .catch((err) => {
        console.log("err", err);
    });

出图

交易行情折线图

行情折线图