38-Vue之ECharts高级-交互API

爱学习de测试小白

已于 2024-03-17 11:35:15 修改

阅读量596

点赞数

分类专栏： # Vue 文章标签： echarts vue.js javascript

于 2023-01-02 17:25:50 首次发布

-- 来着爱学习de测试小白

本文链接：https://blog.csdn.net/IT_heima/article/details/128521009

版权

Vue 专栏收录该内容

41 篇文章 5 订阅

订阅专栏

本文介绍了ECharts中的交互API，包括如何使用全局ECharts对象进行初始化、注册主题、注册地图以及实现多图联动。同时，详细讲解了echartsInstance对象的功能，如setOption设置图表配置和数据，resize方法响应窗口大小变化，以及on/off绑定和解绑事件处理函数等。

摘要由CSDN通过智能技术生成

交互API

前言

本篇来学习下ECharts中交互API的使用

全局ECharts对象

全局 echarts 对象是引入 echarts.js 文件之后就可以直接使用的

init ：初始化ECharts实例对象，使用主题
registerTheme：注册主题

 echarts.registerTheme('CustomTheme', {
        "color": [
            "#5470c6",
            "#91cc75",
            "#fac858",
            "#ee6666",
            "#73c0de",
            "#3ba272",
            "#fc8452",
            "#9a60b4",
            "#ea7ccc"
        ],

registerMap：注册地图数据
connect：实现多图关联，传入联动目标为 EChart 实例，支持数组

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全局ECharts对象</title>
    <!-- cdn方式 引入echarts.js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
    <!-- 引入自定义主题-->
    <script src="lib/CustomTheme.js"></script>
    <!--引入jquery-->
    <script src="lib/jquery.min.js"></script>
</head>

<body>
<!-- 准备一个呈现图表的盒子 -->
<div id='app' style="width: 600px;height: 400px;border: 1px solid deeppink"></div>
<div id='map' style="width: 600px;height: 400px;border: 1px solid blueviolet"></div>
<script>
    // init 初始化echarts实例对象 并设置主题
    var myCharts = echarts.init(document.getElementById('app'), 'CustomTheme')
    var xDataArr = ['张三', '李四', '王五', '大明白', '小糊涂'] // x轴数据
    var yDataArr = [88, 92, 63, 77, 94]  // y轴数据
    var option = {
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            data: xDataArr
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '分数',
                type: 'bar',  // 图表类型  bar:柱状图   line:折线图   pie:饼图
                data: yDataArr,
                markPoint: {   // 标记最大最小值
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {
                            type: 'average', name: '平均值'
                        }
                    ]
                },
                label: {
                    show: true,  // 柱状图显示数值
                    rotate: 30, // 值旋转角度
                },
                barWidth: '30%' // 柱的宽度
            }
        ]
    }
    myCharts.setOption(option)

    var myCharts2 = echarts.init(document.getElementById("map"))
    // json/map/china.json 为本地的地图矢量数据
    $.get('json/map/china.json', function (chinaJson) {
        console.log(chinaJson) // chinaJson 地图矢量数据
        // registerMap :注册地图矢量数据  
        echarts.registerMap('chinaMap', chinaJson)

        var option = {
            geo: {
                type: 'map',// map是一个固定的值 类型
                map: 'chinaMap',//chinaMap需要和registerMap中的第一个参数保持一致
                roam: true, // 设置允许缩放以及拖动的效果
                label: {
                    show: true // 展示标签
                },
                zoom: 1, // 设置初始化的缩放比例
            }

        }
        myCharts2.setOption(option)

        // connect : 实现多图关联
        echarts.connect([myCharts, myCharts2])
    })
</script>
</body>

</html>

多图联动保存的图片

echartsInstance对象

eChartsInstance 对象是通过 echarts.init 方法调用之后得到的实例对象

setOption
- 设置或修改图表实例的配置项以及数据
- 多次调用setOption方法
  合并新的配置和旧的配置
  增量动画
resize : 重新计算和绘制图表

window.onresize = function(){
  myChart.resize();
}

on/off：绑定或者解绑事件处理函数
- 鼠标事件
  - 常见事件: ‘click’、‘dblclick’、‘mousedown’、‘mousemove’、‘mouseup’
- ECharts 事件
  - legendselectchanged、‘datazoom’、‘pieselectchanged’、‘mapselectchanged’
dispatchAction: 主动触发某些行为, 使用代码模拟用户的行为
clear：清空当前实例，会移除实例中所有的组件和图表；清空之后可以再次 setOption
dispose：销毁实例；销毁后实例无法再被使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>echartsInstance对象</title>
    <!-- cdn方式 引入echarts.js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
    <script src="lib/jquery.min.js"></script>
</head>

<body>
<div id='app' style="width: 600px;height:400px"></div>
<button id="btn1">触发行为</button>
<button id="btn2">clear</button>
<button id="btn3">setOption</button>
<button id="btn4">dispose</button>
<script>

    var mCharts = echarts.init(document.getElementById("app"))

    var pieData = [
        {
            name: 'pass',
            value: 80
        },
        {
            name: 'fail',
            value: 10
        },
        {
            name: 'skip',
            value: 5
        },
        {
            name: 'error',
            value: 5
        }
    ]
    var option = {
        legend: {
            data: ['pass', 'fail', 'skip', 'error']
        },
        tooltip: {
            show: true
        },
        series: [
            {
                type: 'pie',
                data: pieData,
                label: {
                    show: true,
                    formatter: function (arg) {
                        console.log(arg)
                        return arg.data.name + '\n' + arg.percent + '%'

                    }
                },
                selectedMode: 'single',  // multiple 多选  single 单选
                selectedOffset: 30,// 偏移距离
                // radius: ['50%', '80%']

            }

        ]
    }
    mCharts.setOption(option)
    // 事件监听
    mCharts.on('click', function (arg) {
        console.log(arg)
    })
    mCharts.off('click') // 解绑click的事件

    // echarts事件变化
    mCharts.on('legendselectchanged', function (arg) {
        console.log('legendselectchanged', arg)
    })
    $('#btn1').click(function () {
        // 模拟用户的行为
        mCharts.dispatchAction({
            type: 'highlight',
            seriesIndex: 0, // 图表索引
            dataIndex: 1 // 数据的索引 图表中的哪一项
        })
        mCharts.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: 0
        })
    })
    $('#btn2').click(function () {
        // 清空图表的实例
        mCharts.clear()
    })
    $('#btn3').click(function () {
        // 重新设置option
        mCharts.setOption(option)
    })
    $('#btn4').click(function () {
        // 销毁mCharts
        mCharts.dispose()
    })
</script>
</body>

</html>