echarts图表

我超幸运12138
已于 2024-07-15 16:25:29 修改
阅读量236
点赞数 2
文章标签： echarts javascript
于 2024-07-15 16:23:04 首次发布
本文链接：https://blog.csdn.net/m0_45858045/article/details/140441839
版权
记一个简单的关于轴线和toolip图表配置
在这里插入图片描述
getEcharts(xAxisData, analysisData) {
            // console.log(analysisData,"数据");
            var chart = this.$echarts.init(this.$refs.classEcharts)
            let option = {
                tooltip: {
                    trigger: 'axis',
                    className: 'echarts-tooltip',
                    backgroundColor:"rgba(0,0,0,.8)",
                    formatter: function(params) {
                        // console.log(params,"params");
                        var result = "<div style='padding:5px 10px;'>"+params[0].name+'<br>'+"</div>";
                        params.forEach(function(item,index) {
                        if(item.seriesName=='课程训练次数'){
                            result +="<div style='padding:5px 10px'>"+item.seriesName+" : "+'<span style="color:#5C9DFF">'+ item.value+"次</span><br>"+'</div>'
                        }else{
                            result +="<div style='padding:5px 10px'>"+item.seriesName+" : "+'<span style="color:#14C9C9">'+ item.value+"%</span><br>"+'</div>'
                        }
                        });
                        return result;
                    }
                },
                grid: {
                    left: "4%",
                    right: "5%"

                },
                legend: {
                    data: [
                        {
                            name: "课程训练次数",
                            icon: "circle",
                            color: "#165DFF",
                        },
                        {
                            name: "课程进度",
                            icon: "circle",
                            color: "#14C9C9 ",
                        },
                    ],
                },

                xAxis: {
                    type: 'category',
                    axisLabel: {
                        show: true, //这里的show用于设置是否显示y轴下的字体 默认为true
                        textStyle: {
                            //textStyle里面写y轴下的字体的样式
                            color: '#0072DB',
                            fontSize: 12,
                        },
                        formatter: '{value}',
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#0072DB', // 设定 y 轴线的颜色
                            width: 1,         // 设定 y 轴线的宽度
                            type: 'solid'    // 设定 y 轴线的类型，可选：'solid', 'dashed', 'dotted'
                        }
                    },
                    boundaryGap: false,
                    data: xAxisData
                },
                yAxis: [
                    {
                    type: 'value',
                    name: "课程训练次数",
                    nameTextStyle: {
                        color: "#666666",
                        fontSize: 12,
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            //textStyle里面写y轴下的字体的样式
                            color: '#0072DB',
                            fontSize: 12,
                        },
                        formatter: '{value}'
                    },
                    axisTick: {       // 坐标轴刻度
                        show: false   // 不显示刻度
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#0072DB', // 设定 y 轴线的颜色
                            width: 1,         // 设定 y 轴线的宽度
                            type: 'solid'    // 设定 y 轴线的类型，可选：'solid', 'dashed', 'dotted'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#0072DB',
                            type: 'dotted',
                          
                        }
                    }
                }, {
                    type: 'value',
                    name: "课程进度",
                    nameTextStyle: {
                        color: "#666666",
                        fontSize: 12,
                    },
                    min: 0,
                    max: 100,
                    interval: 20,
                    axisLabel: {
                        show: true, //这里的show用于设置是否显示y轴下的字体 默认为true
                        textStyle: {
                            //textStyle里面写y轴下的字体的样式
                            color: '#0072DB',
                            fontSize: 12,
                        },
                        formatter: '{value}%',
                    },
                    axisLine: {       // 坐标轴线
                        show: false,   // 默认显示，设为false则代表不显示
                    },
                    axisTick: {       // 坐标轴刻度
                        show: false   // 不显示刻度
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: '#0072DB',
                            type: 'dotted',
                            
                        }
                    }
                }],
                series: [
                    {
                        name: '课程训练次数',
                        type: 'line',
                        data: analysisData[0].data,
                        color: "#165DFF",
                        yAxisIndex: 0

                    },
                    {
                        name: '课程进度',
                        type: 'line',
                        data: analysisData[1].data,
                        color: "#14C9C9 ",
                        yAxisIndex: 1
                    }

                ]
            };
            chart.setOption(option);

        },