【高级课程笔记】—— Echarts高级应用（二）

最新推荐文章于 2024-05-11 10:29:34 发布

柳柳Elena

最新推荐文章于 2024-05-11 10:29:34 发布

阅读量1.4k

点赞数 1

文章标签： js css 数据可视化 vue html

本文链接：https://blog.csdn.net/qq_34235864/article/details/120878688

版权

一、视觉映射

注：visualMap 以前叫dataRange，如果你看到了比较老的教程或博客，里面有dataRange，要知道那就是视觉映射 visualMap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视觉映射</title>
    <style>
        #main{
            margin: 20px;
            width: 800px;
            height: 500px;
        }
    </style>
</head>
<body>
<!--建立dom 容器-->
<div id="main"></div>
<!--引入echarts-->
<script src="./js/echarts.min.js"></script>
<script>
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.getElementById('main'));

    //数据源
    const source = [
       //x   y   z   w
        [2,  1, 10, 90],
        [4,  2, 20, 80],
        [6,  3, 30, 70],
        [8,  4, 40, 60],
        [10, 5, 50, 50],
        [12, 6, 60, 40],
        [14, 7, 70, 30],
        [16, 8, 80, 20],
        [18, 9, 90, 10],
    ];

    //颜色范围
    const color=['#70ad47', '#c00000'];

    // 指定图表的配置项和数据
    const option = {
        tooltip: {},
        /*绘图区*/
        grid:{
            left:100
        },
        /*x 轴*/
        xAxis: {},
        /*y 轴*/
        yAxis: {},
        /*数据集*/
        dataset:{source},
        /*
        * visualMap 视觉映射 {}
        *   type 映射方式
        *       continuous 连续型
        *       piecewise 分段型
        *   min 映射区间的起始位置，如0
        *   max 映射区间的结束位置，如90
        *   range [] 显示此范围内的项目(在连续型中有效)，百分百类型，如[0,100]
        *   calculable 是否显示拖拽用的手柄
        *   inRange 自定义映射范围
        *       color[] 颜色映射
        *       symbolSize[] 大小映射
        *
        * */
        visualMap:{
            type:'continuous',
            // type:'piecewise',
            min:0,
            max:100,
            range:[0,90],
            calculable: true,
            inRange:{
                color,
                symbolSize:[10,60],
            },
            // dimension:2,
            dimension:3
        },

        /*系列列表*/
        series: [
            {
                name: '视觉映射',
                type: 'scatter',
                encode:{
                    tooltip:[0,1,2]
                }
            },
        ]
    };


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

二、事件

ECharts 如何监听事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <style>
        #main{
            margin: 20px;
            width: 700px;
            height: 500px;
        }
    </style>
</head>
<body>
<!--建立dom 容器-->
<div id="main"></div>
<!--引入echarts-->
<script src="./js/echarts.min.js"></script>
<script>
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    const option = {
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    /*
    * 使用on 方法绑定click点击事件
    * */
    myChart.on('click',function(param){
        console.log(param)
    })


</script>
</body>
</html>

鼠标事件有哪些

组件交互事件的监听

最低0.47元/天解锁文章

柳柳Elena

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
【高级课程笔记】—— Echarts高级应用（二）

一、视觉映射注：visualMap 以前叫dataRange，如果你看到了比较老的教程或博客，里面有dataRange，要知道那就是视觉映射 visualMap<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>视觉映射&...
复制链接

扫一扫