echarts学习笔记(2) ---- 设置单页面多张图表

最新推荐文章于 2024-05-03 11:47:20 发布

VIP文章 santongwater

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量5k

点赞数 1

分类专栏： echarts 文章标签： echarts data visualization 商业智能数据可视化 javascript

本文链接：https://blog.csdn.net/santongwater/article/details/38638993

版权

上一篇介绍了echarts 使用模块化单文件的引入，如果要在一个页面中添加多张图的话，怎么办呢？

这里向大家介绍一种简单的方法：

建立多个div， id= 'main'.

    <div class="chart">
        <div id="main"><span>1</span></div>
        <div id="main"><span>2</span></div>
        <div id="main"><span>3</span></div>
        <div id="main"><span>4</span></div>
        <div id="main"><span>5</span></div>
        <div id="main"><span>6</span></div>
    </div>

在javascript中取到所有 id ='main'

var myChart = [];
var domMain = $("[id = main]");

然后把图表的设置和setoption都放在function里面

这里把option作为一个object，储存了所有表格的配置

最后用一个loop来set好图表

    function (ec,defaultTheme){
        echarts = ec;
        var option = {
            0:{
                backgroundColor: '#BCEE68',

                title : {
                    text: '性别'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    data:['男','女']
                },
                toolbox: {
                    show : true,
                    feature : {
                        dataView : {show: true, readOnly: false},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                series : [
                    {
                        name:'性别',
                        type:'pie',
                        radius : '55%',