echarts 自适应屏幕主题颜色自动缩放选框多图展示自定义toolTip

最新推荐文章于 2023-05-30 09:30:15 发布

滴滴咚咚咚

最新推荐文章于 2023-05-30 09:30:15 发布

阅读量570

点赞数

分类专栏： echarts

本文链接：https://blog.csdn.net/darkCloudss/article/details/112613521

版权

echarts 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

图
在这里插入图片描述

自适应屏幕

/**
 * 自适应
 */
window.addEventListener("resize",function () {
    myChart.resize(option)
});

主题颜色

var myChart =echarts.init(document.getElementById("main"),'dark');  //dark 深色还是浅色  默认浅色

自动缩放选框

在这里插入图片描述
自动选中

注意 echarts版本要选对不然不生效

toolbox: {
            left: 'right', //放到右边
            itemGap:20,  //icon间隔
            feature: {
                dataZoom: {  //缩放工具   注意 echarts版本要选对  不然不生效
                    show : true, //是否展示
                    yAxisIndex: 'none',
                    iconStyle:{
                        // opacity:0,  //设置icon为透明
                        normal:{
                            textPosition:"left"  //位置
                            // color:"#fff",
                            // color:'white',//设置颜色
                        }
                    }

                },

                restore: {}, //还原
                saveAsImage: {}  //保存图片
            }
        },

如果想要自动缩放区域（不用手动点）执行完加上
myChart.one(‘finished’,function () {
//区域缩放自动
myChart.dispatchAction({
type: “takeGlobalCursor”,
key: ‘dataZoomSelect’,
dataZoomSelectActive: true
});
console.log(“完成”)
})

多图展示

在这里插入图片描述
注意：xxxIndex要一一对应表示第几个图

（如果你各个图没什么关联性建议动态添加div,即一个图添加一个实例）

legend: [
            {
                top:'10%',
                data:['数据1'],
                right:'20'
            },
            {
                top:'65%',
                gridIndex: 1,
                right:'20',
                data:['数据2']
            }
        ],

        xAxis: [{
            data: dateList
        }, {
            data: dateList,
            gridIndex: 1
        }],
        yAxis: [{
            splitLine: {show: false}
        }, {
            splitLine: {show: false},
            gridIndex: 1
        }],
        grid: [{
            bottom: '60%'
        }, {
            top: '60%'
        }],
        series: [{
            type: 'line',
            showSymbol: false,
            name:"数据1",
            data: valueList
        }, {
            type: 'line',
            showSymbol: false,
            data: valueList,
            name:"数据2",
            xAxisIndex: 1,
            yAxisIndex: 1
        }]

自定义tooltip

如果想要自定义别的啥去官网文档配置项里面找到对应的formatter查看，大同小异

tooltip: {
            trigger: 'axis',
            formatter(params){
                var res = params[0].name;
                console.log(res)
                console.log(params)
                for (var i = 0; i < params.length; i++) {
                    // console.log(params[i]);
                    var datas = params[i].data || "--";
                    if(datas!=="--") datas = parseFloat(params[i].data.toFixed(2));

                    if (datas >= 1000 && datas < 1000000) {

                        datas =  parseFloat((datas / 1000).toFixed(2)) +"k";
                    }else if(datas >= 1000000){
                        datas = parseFloat((datas / 1000000).toFixed(2))+"Mil";
                    }
                    //
                    console.log(datas);
                    res += "<br>"+params[i].marker+params[i].seriesName+"：$"+datas;
                }

                return res;
            },
        },

完整代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="margin:0;padding: 0">
<div id="main" style="width: 100vw; height: 100vh;margin:auto;"> </div>
</body>
</html>

<script src="jquery-3.3.1.min.js"></script>
<!--<script src="echarts.min.js"></script>-->
<script src="echarts-4.7.0.js"></script>

<script>
var myChart =echarts.init(document.getElementById("main"),'dark');  //dark 深色还是浅色  默认浅色


/**
 * 自适应
 */
window.addEventListener("resize",function () {
    myChart.resize(option)
});

data = [["2000-06-05",116],["2000-06-06",129],["2000-06-07",135],["2000-06-08",86],["2000-06-09",73],["2000-06-10",85],["2000-06-11",73],["2000-06-12",68],["2000-06-13",92],["2000-06-14",130],["2000-06-15",245],["2000-06-16",139],["2000-06-17",115],["2000-06-18",111],["2000-06-19",309],["2000-06-20",206],["2000-06-21",137],["2000-06-22",128],["2000-06-23",85],["2000-06-24",94],["2000-06-25",71],["2000-06-26",106],["2000-06-27",84],["2000-06-28",93],["2000-06-29",85],["2000-06-30",73],["2000-07-01",83],["2000-07-02",125],["2000-07-03",107],["2000-07-04",82],["2000-07-05",44],["2000-07-06",72],["2000-07-07",106],["2000-07-08",107],["2000-07-09",66],["2000-07-10",91],["2000-07-11",92],["2000-07-12",113],["2000-07-13",107],["2000-07-14",131],["2000-07-15",111],["2000-07-16",64],["2000-07-17",69],["2000-07-18",88],["2000-07-19",77],["2000-07-20",83],["2000-07-21",111],["2000-07-22",57],["2000-07-23",55],["2000-07-24",60]];
var legArr = [];
var dateList = data.map(function (item) {
    legArr.push({
        name:item[0]
    })
    return item[0];
});
var valueList = data.map(function (item) {
    return item[1];
});
console.log(dateList)
console.log(valueList)
console.log(legArr)


    option = {

        title: [{
            left: 'center',
            text: 'Gradient along the y axis'
        }, {
            top: '55%',
            left: 'center',
            text: 'Gradient along the x axis'
        }],
        tooltip: {
            trigger: 'axis',
            formatter(params){
                var res = params[0].name;
                console.log(res)
                console.log(params)
                for (var i = 0; i < params.length; i++) {
                    // console.log(params[i]);
                    var datas = params[i].data || "--";
                    if(datas!=="--") datas = parseFloat(params[i].data.toFixed(2));

                    if (datas >= 1000 && datas < 1000000) {

                        datas =  parseFloat((datas / 1000).toFixed(2)) +"k";
                    }else if(datas >= 1000000){
                        datas = parseFloat((datas / 1000000).toFixed(2))+"Mil";
                    }
                    //
                    console.log(datas);
                    res += "<br>"+params[i].marker+params[i].seriesName+"：$"+datas;
                }

                return res;
            },
        },


        dataZoom: [ {
            type: 'inside'
        }],
        toolbox: {
            left: 'right', //放到右边
            itemGap:20,  //icon间隔
            feature: {
                dataZoom: {  //缩放工具   注意 echarts版本要选对  不然不生效
                    show : true, //是否展示
                    yAxisIndex: 'none',
                    iconStyle:{
                        // opacity:0,  //设置icon为透明
                        normal:{
                            textPosition:"left"  //位置
                            // color:"#fff",
                            // color:'white',//设置颜色
                        }
                    }

                },

                restore: {}, //还原
                saveAsImage: {}  //保存图片
            }
        },

        legend: [
            {
                top:'10%',
                data:['数据1'],
                right:'20'
            },
            {
                top:'65%',
                gridIndex: 1,
                right:'20',
                data:['数据2']
            }
        ],

        xAxis: [{
            data: dateList
        }, {
            data: dateList,
            gridIndex: 1
        }],
        yAxis: [{
            splitLine: {show: false}
        }, {
            splitLine: {show: false},
            gridIndex: 1
        }],
        grid: [{
            bottom: '60%'
        }, {
            top: '60%'
        }],
        series: [{
            type: 'line',
            showSymbol: false,
            name:"数据1",
            data: valueList
        }, {
            type: 'line',
            showSymbol: false,
            data: valueList,
            name:"数据2",
            xAxisIndex: 1,
            yAxisIndex: 1
        }]
    };

myChart.setOption(option);
myChart.one('finished',function () {
    // myChart.on('rendered',function () {
    //区域缩放  自动
    myChart.dispatchAction({
        type: "takeGlobalCursor",
        key: 'dataZoomSelect',
        dataZoomSelectActive: true
    });

    //自适应
    myChart.resize();
    console.log("完成")
})
</script>

滴滴咚咚咚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
echarts 自适应屏幕主题颜色自动缩放选框多图展示自定义toolTip

自适应屏幕/** * 自适应 */window.addEventListener("resize",function () { myChart.resize(option)});主题颜色var myChart =echarts.init(document.getElementById("main"),'dark'); //dark 深色还是浅色默认浅色自动缩放选框自动选中注意 echarts版本要选对不然不生效toolbox: { left
复制链接

扫一扫