多图表例子

###多图例子

<!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>Document</title>
    <style>
        #top{
            width: 100%;
            height: 400px;
            /* background-color: red; */
            /* float: left; */
        }
        #topL{
            width: 50%;
            height: 100%;
            /* background-color: green; */
            float: left;
        }
        #topR{
            width: 50%;
            height: 100%;
            /* background-color: fuchsia; */
            float:right;
        }
        #foot{
            width: 100%;
            height: 560px;
        }
        #footL{
            width: 50%;
            height: 100%;
            /* background-color: green; */
            float: left;
        }
        #footR{
            width: 50%;
            height: 100%;
            /* background-color: green; */
            float:right;
        }
    </style>
</head>
<body>
    <!-- <div id="map-wrap0" style="width: 98%;height:800px;"></div> -->

    <div id="body">
        <div id="top">
            <div id="topL"></div>
            <div id="topR">
                <h3>全球GMV数据展示</h3>
                <div id="topTops"></div>
            </div>
        </div>
        <div id="foot">
                <div id="footL"></div>
                <div id="footR">
                </div>
        </div>
    </div>
</body>
<script src="./lib/jquery/jQuery-2.1.4.min.js"></script>
<script src="./lib/dep/echarts.js"></script>
<script src="./lib/map/json/world.js"></script>
<script>
var mapChart = echarts.init(document.getElementById('topL'));
var topLOption = {
    title : {
        text: '未来一周气温变化',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['最高气温']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日','周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value',
            axisLabel : {
                formatter: '{value} °C'
            }
        }
    ],
    series : [
        {
            name:'最高气温',
            type:'line',
            data:[0, 15],
            markPoint : {
                data : [
                    // {type : 'max', name: '最大值'},
                    // {type : 'min', name: '最小值'}
                ]
            },
            smooth:true,
            markLine : {
                data : [
                    // {type : 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'最低气温',
            type:'line',
            data:[1, -2, 2, 5, 3, 2, 0],
            markPoint : {
                data : [
                    // {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                ]
            },
            markLine : {
                data : [
                    // {type : 'average', name : '平均值'}
                ]
            }
        }
    ]
};
        

mapChart.setOption(topLOption);













// var maptopL = echarts.init(document.getElementById('topL'));


//------------------------------------引用请注明出处
// 自定义纹理(参考echarts的饼图纹理  http://gallery.echartsjs.com/editor.html?c=pie-pattern)
var myImg = new Image();
var myColor=['red','orange','yellow','green','cyan','blue','purple'];
var xAxisData=['Sun', 'Mon', 'Tue'];


var optionFoot = {
    title: {
        text: 'Echarts Color引申用法',
        subtext:'作者 : 花自飘凌水自流'
    },
    toolbox:{
        right:20,
        feature:{
            saveAsImage: {},
            restore: {},
            dataView: {},
            dataZoom: {},
            magicType: {
                type:['line','bar']
            },
            // brush: {},
        }
    },
    grid: [
        {
            show: false,
            left: 0,
            top: '12%',
            containLabel: true,
            width: '22.5%',
            height:'40%'
        },
        {
            show: false,
            left: '25%',
            top: '12%',
            containLabel: true,
            width: '22.5%',
            height:'40%'
        }, 
        {
            show: false,
            left: 0,
            top: '12%',
            left: '50%',
            containLabel: true,
            width: '22.5%',
            height:'40%'
        },
        {
            show: false,
            left: '75%',
            top: '12%',
            containLabel: true,
            width: '22.5%',
            height:'40%'
        },
        {
            show: false,
            left: 0,
            top: '60%',
            containLabel: true,
            width: '22.5%',
            height:'40%'
        },
        {
            show: false,
            left: '25%',
            top: '60%',
            containLabel: true,
            width: '22.5%',
            height:'40%'
        }, 
        {
            show: false,
            left: 0,
            top: '60%',
            left: '50%',
            containLabel: true,
            width: '22.5%',
            height:'40%'
        },
        {
            show: false,
            left: '75%',
            top: '60%',
            containLabel: true,
            width: '22.5%',
            height:'40%'
        },
        
    ],
    xAxis: [
        {
            gridIndex:0,
            axisTick:{
                alignWithLabel: true
            },
            data:xAxisData
        },
         {
            gridIndex:1,
            axisTick:{
                alignWithLabel: true
            },
            data:xAxisData
        },
         {
            gridIndex:2,
            axisTick:{
                alignWithLabel: true
            },
            data:xAxisData
        },
         {
            gridIndex:3,
            axisTick:{
                alignWithLabel: true
            },
            data:xAxisData
        },
        {
            gridIndex:4,
            axisTick:{
                alignWithLabel: true
            },
            data:xAxisData
        },
         {
            gridIndex:5,
            axisTick:{
                alignWithLabel: true
            },
            data:xAxisData
        },
         {
            gridIndex:6,
            axisTick:{
                alignWithLabel: true
            },
            data:xAxisData
        },
         {
            gridIndex:7,
            axisTick:{
                alignWithLabel: true
            },
            data:xAxisData
        }
    ],
    yAxis: [
        {
            gridIndex:0,
        },
        {
            gridIndex:1,
        },
        {
            gridIndex:2,
        },
        {
            gridIndex:3,
        },
        {
            gridIndex:4,
        },
        {
            gridIndex:5,
        },
        {
            gridIndex:6,
        },
        {
            gridIndex:7,
        },
    ],
   
    series: [
        {
            type: 'bar',
            name:'自定义纹理',
            xAxisIndex:0,
            yAxisIndex:0,
            itemStyle: {
                 normal: {
                    color: {
                        // image: myImg,
                        repeat: 'repeat'
                    },
                    borderWidth: 3,
                    borderColor: '#235894'
                }
            },
            data:[220, 182, 191]
        },
        {
            type: 'bar',
            xAxisIndex:1,
            yAxisIndex:1,
            name:'渐变1',
            itemStyle: {
                 normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(255, 0, 0, 0.8)'
                    }, {
                        offset: 0.8,
                        color: 'rgba(0, 255, 0, 0.8)'
                    }], false),
                }
            },
            data:[220, 182, 191]
        },
        {
            type: 'bar',
            xAxisIndex:2,
            yAxisIndex:2,
            name:'渐变2',
            itemStyle: {
               normal: {
					color: {
					    type: 'linear',
					    x: 0,
					    y: 0,
					    x2: 0,
					    y2: 1,
					    colorStops: [{
					        offset: 0, color: 'rgba(14,125,218,0.8)' 
					    }, {
					        offset: 1, color: 'rgba(14,125,218,0.3)' 
					    }],
					    globalCoord: false 
					}
				}
            },
            data:[220, 182, 191]
        },
        {
            type: 'bar',
            xAxisIndex:3,
            yAxisIndex:3,
            itemStyle: {
                normal: {
                	// callback,设定每一bar颜色,配置项color顶axis一组bars颜色
                    color: function(params) {
                        var num=myColor.length;
                        return myColor[params.dataIndex%num]
                    }
                }
	   		},
            data:[220, 182, 191]
        },
        {
            type: 'bar',
            name:'自定义纹理',
            xAxisIndex:4,
            yAxisIndex:4,
            itemStyle: {
                 normal: {
                    color: {
                        // image: myImg,
                        repeat: 'repeat',
                       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(255, 0, 0, 0.8)'
                    }, {
                        offset: 0.8,
                        color: 'rgba(0, 255, 0, 0.8)'
                    }], false),
                    },
                    borderWidth: 3,
                    borderColor: '#235894'
                }
            },
            data:[220, 182, 191]
        },
        {
            type: 'bar',
            xAxisIndex:5,
            yAxisIndex:5,
            name:'渐变1',
            itemStyle: {
                 normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(255, 0, 0, 0.8)'
                    }, {
                        offset: 0.8,
                        color: 'rgba(0, 255, 0, 0.8)'
                    }], false),
                }
            },
            data:[220, 182, 191]
        },
        {
            type: 'bar',
            xAxisIndex:6,
            yAxisIndex:6,
            name:'渐变2',
            itemStyle: {
               normal: {
					color: {
					    type: 'linear',
					    x: 0,
					    y: 0,
					    x2: 0,
					    y2: 1,
					    colorStops: [{
					        offset: 0, color: 'rgba(14,125,218,0.8)' 
					    }, {
					        offset: 1, color: 'rgba(14,125,218,0.3)' 
					    }],
					    globalCoord: false 
					}
				}
            },
            data:[220, 182, 191]
        },
        {
            type: 'bar',
            xAxisIndex:7,
            yAxisIndex:7,
            itemStyle: {
                normal: {
                	// callback,设定每一bar颜色,配置项color顶axis一组bars颜色
                    color: function(params) {
                        var num=myColor.length;
                        return myColor[params.dataIndex%num]
                    }
                }
	   		},
            data:[220, 182, 191]
        }
    ]
};




// var maptopL = echarts.init(document.getElementById('topL'));
var mapfoot = echarts.init(document.getElementById('footL'));
mapfoot.setOption(optionFoot);

var color =['#FF0000', ' #FF7F00', '#FFFF00', '#00FF00', '#00FFFF', '#64F7CD','orangered', '#8B00FF','#1E85FF','#334455',"#64F7CD"];
var data = [{
    "time": 2017,
    "data": [{
        "name": "United States",
        "value": [1025000, 31.222, "美国分部",'red']
    }, 
    {
        "name": "Russia",
        "value": [433412, 13.202, "俄国分部",'green']
    }
    ,
    {
        "name": "Japan",
        "value": [209071, 6.369, "日本分部",'#ddd']
    }
    // , 
    // {
    //     "name": "Japan",
    //     "value": [209071, 6.369, "日本分部"]
    // }, {
    //     "name": "Germany",
    //     "value": [208867, 6.362, "德国分部"]
    // }, {
    //     "name": "France",
    //     "value": [146982, 4.477, "法国分部"]
    // }, {
    //     "name": "United Kingdom",
    //     "value": [124970, 3.807, "英国分部"]
    // }, {
    //     "name": "Italy",
    //     "value": [109260, 3.328, "意大利分部"]
    // }, {
    //     "name": "China",
    //     "value": [91506, 2.787, "中国分部"]
    // }, {
    //     "name": "Canada",
    //     "value": [86303, 2.629, "加拿大分部"]
    // }, {
    //     "name": "India",
    //     "value": [61470, 1.873, "印度分部"]
    // }
    ]
}]


var optionFootR = {
    backgroundColor: '',
    baseOption: {
        animationDurationUpdate: 1000,
        animationEasingUpdate: '',
        timeline: {
            show:false,
            axisType: 'category',
            orient: 'vertical',
            autoPlay: true,
            inverse: true,
            playInterval: 5000,
            left: null,
            right: 5,
            top: 20,
            bottom: 20,
            width: 46,
            height: null,
            label: {
                normal: {
                    textStyle: {
                        color: '#ddd'
                    }
                },
                emphasis: {
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            symbol: 'none',
            lineStyle: {
                color: '#555'
            },
            checkpointStyle: {
                color: '#bbb',
                borderColor: '#777',
                borderWidth: 1
            },
            controlStyle: {
                showNextBtn: false,
                showPrevBtn: false,
                normal: {
                    color: '#666',
                    borderColor: '#666'
                },
                emphasis: {
                    color: '#aaa',
                    borderColor: '#aaa'
                }
            },
            data: data.map(function(ele) {
                return ele.time
            })
        },
        backgroundColor: '#25499F',
        title: {
            text: '2017全球GMV情况',
            subtext: '统计单位:100',
            left: 'center',
            top: 'top',
            textStyle: {
                fontSize: 25,
                color: 'rgba(255,255,255, 0.9)'
            }
        },
        tooltip: {
            formatter: function(params) {
                if ('value' in params.data) {
                    return params.data.value[2] + ': ' + params.data.value[0];
                }
            }
        },
        grid: {
            left: 10,
            right: '45%',
            top: '70%',
            bottom: 5
        },
        xAxis: {},
        yAxis: {},
        series: [{
            id: 'map',
            type: 'map',
            mapType: 'world',
            top: '10%',
            //bottom: '25%',
            //left: '5%',
            //right: '10%',
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#404a59'
                },
                emphasis: {
                    label: {
                        show: true
                    },
                    areaColor: 'rgba(255,255,255, 0.5)'
                }
            },
            data: []
        }, {
            id: 'bar',
            type: 'bar',
            tooltip: {
                show: false
            },
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    textStyle: {
                        color: '#ddd'
                    }
                }
            },
            data: []
        }, {
            id: 'pie',
            type: 'pie',
            radius: ['12%', '20%'],
            center: ['75%', '85%'],
            //roseType: 'area',
            tooltip: {
                formatter: '{b} {d}%'
            },
            data: [],
            label: {
                normal: {
                    textStyle: {
                        color: '#ddd'
                    }
                }
            },
            labelLine: {
                normal: {
                    lineStyle: {
                        color: '#ddd'
                    }
                }
            },
            itemStyle: {
                normal: {
                    borderColor: 'rgba(0,0,0,0.3)',
                    borderSize: 1
                }
            }
        }]
    },
    options: []
}


//@mark:待优化
for (var i = 0; i < data.length; i++) {
    //计算其余国家GDP
    var restPercent = 100;
    var restValue = 0;
    data[i].data.forEach(function(ele) {
        restPercent = restPercent - ele.value[1];
    });
    restValue = data[i].data[0].value[0] * (restPercent / data[i].data[0].value[1]);
    optionFootR.options.push({
        // visualMap: [{
        //     //type:'continous',
        //     //type: 'continuous',
        //     show:false,
        //     calculable: true,
        //     dimension: 0,
        //     left: 10,
        //     top: 'center',
        //     itemWidth: 12,
        //     min: data[i].data[9].value[0],
        //     max: data[i].data[0].value[0],
        //     text: ['High', 'Low'],
        //     textStyle: {
        //         color: '#ddd'
        //     },
        //     inRange: {
        //         //color: ['lightskyblue', 'yellow', 'orangered', 'red']
        //         color: ['lightskyblue', 'yellow', 'white'],
                
        //     }
        // }],
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.1],
            axisLabel: {
                show: false,
            },
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'category',
            axisLabel: {
                show: false,
                textStyle: {
                    color: '#ddd'
                }
            },

            data: data[i].data.map(function(ele) {
                return ele.value[2]
            })
            // .reverse()
        },
        series: [{
            id: 'map',
            data: data[i].data,
            itemStyle: {
                normal: {
                	// callback,设定每一bar颜色,配置项color顶axis一组bars颜色
                    color: function(params) {
                        var num=myColor.length;
                        console.log(params.data);
                        if(params.data.value){
                            // console.log(params.data);
                            // console.log(params.data.value[3]);
                            // console.log(params.data);
                            return params.data.value[3]
                        }
                        // console.log(params.data.value[3])
                        // return params.data.value[3]
                        // myColor[params.dataIndex%num]
                    }
                }
	   		},
        }, {
            id: 'bar',
            label: {
                normal: {
                    position: 'right',
                    formatter: '{b} : {c}',
                    
                }
            },
            itemStyle: {
                normal: {
                	// callback,设定每一bar颜色,配置项color顶axis一组bars颜色
                    color: function(params) {
                        var num=myColor.length;
                        // var arr =['red','green'];
                        // console.log(params)
                        // return ''+params+''
                        // console.log(params.dataIndex)
                        return myColor[params.dataIndex];
                    }
                }
	   		},
            data: data[i].data.map(function(ele) {
                return ele.value[0]
            })
            // .sort(function(a, b) {
            //     return a > b
            // })
        }, {
            id: 'pie',

            data: data[i].data.map(function(ele) {
                return {
                    name: ele.value[2]+' '+ele.value[1]+'%',
                    value: ele.value
                }
            }),
            itemStyle: {
                normal: {
                	// callback,设定每一bar颜色,配置项color顶axis一组bars颜色
                    color: function(params) {
                        var num=myColor.length;
                        // var arr =['red','green'];
                        // console.log(params)
                        // return ''+params+''
                        // console.log(params.dataIndex)
                        return myColor[params.dataIndex];
                    }
                }
	   		},
        }]
    })
}
var mapfootR = echarts.init(document.getElementById('footR'));
mapfootR.setOption(optionFootR);


</script>

</html>
复制代码

转载于:https://juejin.im/post/5a3217d6f265da431440b801

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值