交互API

全局echarts对象：

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

　　init：初始化echarts实例对象，使用主题。

　　echarts.registerTheme：注册主题的时候使用。

　　registerMap：

　　　　（1）注册地图数据

　　　　$.get('json/map/china.json',function(chinajson){

　　　　　　echarts.registerMap('china',chinajson);

　　　　})

　　　　（2）geo组件使用地图数据

　　　　　var option={
　　　　　　geo:{

　　　　　　　　type:'map',

　　　　　　　　map:'china'

　　　　　　}

　　connect：可以将多个图表进行关联。echarts.connect([myChart,myChart2])

　　　　connect可以实现多个图表关联，传入联动目标为Echarts实例对象，支持数组。

　　　　保存图片的自动拼接、刷新按钮、重置按钮、提示框联动、图例选择、数据范围修改等...

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/echarts.min.js"></script>
    <script src="./roma.js"></script>
    <script src="./lib/jquery.min.js"></script>
</head>

<body>
    <div id="main" style="width:600px;height:400px;border:1px solid black"></div>
    <div id="box" style="width:600px;height:400px;border:1px solid black"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'), "roma");
        var myChart2 = echarts.init(document.getElementById('box'), "roma");

        var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
        var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
        var option = {
            toolbox:{
                feature:{
                    saveAsImage:{}
                }
            },
            xAxis: {
                type: 'category',
                data: xDataArr
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                type: 'bar',
                data: yDataArr

            }]
        }
        myChart.setOption(option);

        $.get('json/map/china.json', function (ret) {
            echarts.registerMap('china', ret)
            var option2 = {
                geo: {
                    type: 'map',
                    map: 'china'
                }
            }
            myChart2.setOption(option2)
            echarts.connect([myChart,myChart2]) // 关联起来之后下载的就是两张图表
        })
    </script>
</body>

</html>

echartsInstance对象：

　　echartsInstance对象是通过echarts.init方法调用之后得到的。

　　setOption

　　resize

　　on\off

posted on 2020-12-29 17:28 稳住别慌阅读(158) 评论(0) 收藏举报