echarts对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="echarts.min.js"></script>
    <script src="jquery.min.js"></script>
    <script src="json/china.json"></script>
</head>
<body>
<div style="width: 400px;height: 600px"></div>
<div style="width: 400px;height: 600px" id="div1"></div>
</body>
</html>
<script>
    var mCharts=echarts.init(document.querySelector('div'))
    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,
                markPoint: {
                    data: [
                        {
                            type: 'max', name: '最大值'
                        },
                        {
                            type: 'min', name: '最小值'
                        }
                    ]
                },
                markLine: {
                    data: [
                        {
                            type: 'average', name: '平均值'
                        }
                    ]
                },
                label: {
                    show: true,
                    rotate: 60
                },
                barWidth: '30%'
            }
        ]
    }
    mCharts.setOption(option)

    var mCharts2 = echarts.init(document.querySelector('#div1'))
    $.get('json/china.json', function(ret){
        echarts.registerMap('aa', ret)
        var option2 = {
            geo: {
                type: 'map',
                map: 'aa'
            }
        }
        mCharts2.setOption(option2)
         echarts.connect([mCharts, mCharts2]) // 将柱状图和地图关联起来
    })


</script>

 

posted @ 2021-01-31 10:36  好吗,好  阅读(54)  评论(0)    收藏  举报