Echarts实现地图，环形图简单案例

来源：互联网发布：php微商城源码编辑：程序博客网时间：2024/06/05 11:57

实现中国地图

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts.js插件实现中国地图省份选择效果</title>
    <style>
        *{margin:0;padding:0;}
    </style>
</head>
<body>
    <div id="main" style="height:500px"></div>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

       <script src="http://echarts.baidu.com/build/dist/echarts.min.js"></script>
     <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script>
        // 路径配置
        require.config({
            paths: {
                echarts: 'dist'
            }
        });
        // 使用
        require(['echarts','echarts/chart/map'],
            function (ch) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = ch.init(document.getElementById('main'));
            option = {
                tooltip : {
                    trigger: 'item',
                    formatter: '{b}'
                },
                series : [{
                    name: '中国',
                    type: 'map',
                    mapType: 'china',
                    selectedMode : 'single',//multiple多选
                    itemStyle:{
                        normal:{
                            label:{
                                show:true,
                                textStyle: {
                                    color: "#231816"
                                }
                            },
                            areaStyle:{color:'#B1D0EC'},
                            color:'#B1D0EC',
                            borderColor:'#dadfde'//区块的边框颜色
                        },
                        emphasis:{//鼠标hover样式
                            label:{
                                show:true,
                                textStyle:{
                                    color:'#fa4f04'
                                }
                            }
                        }
                    },
                    data:[
                        {name:'四川',selected:true}
                    ]
                }]
            };
            var ecConfig = require('echarts/config');
            myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
                var selected = param.selected;
                var urlArr = ['http://www.baidu.com','http://http://www.cnblogs.com/sapho'];
                for (var p in selected) {
                    if (selected[p]) {
                        switch(p){
                            case '河南':
                                location.href = urlArr[0];
                                break;
                            case '重庆':
                                location.href = urlArr[1];
                                break;
                            default:
                                break;
                        }

                    }
                }
            });
            // 为echarts对象加载数据
            myChart.setOption(option);
        });
    </script>
</body>
</html>

echarts实现环形图

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>AzzanTest</title>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="http://echarts.baidu.com/dist/echarts.min.js"></script>
</head>
<body>

<div id="main2" style="width: 250px;height:200px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main2'));
// 指定图表的配置项和数据
//2.设置Option
             var option={
                  tooltip:{
                      trigger:'item',
                      formatter:"{a}<br/>{b}:{c}({d}%)"
                  } ,
                  legend:{
                      orient:'vertical' ,
                      x:'left'   ,
                      data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                  } ,
                  series: [
                      {
                          name: '访问来源',
                          type: 'pie',
                          radius: ['50%', '70%'],
                          avoidLabelOverlap: false,
                          label: {
                                      normal: {
                                          show: false,
                                          position: 'center'
                                      },
                                      emphasis: {
                                          show: true,
                                          textStyle: {
                                              fontSize: '30',
                                              fontWeight: 'bold'
                                          }
                                      }
                                  } ,
                          labelLine: {
                              normal: {
                                  show: false
                              }
                          },
                          data: [
                              {value: 335, name: '直接访问'},
                              {value: 310, name: '邮件营销'},
                              {value: 234, name: '联盟广告'},
                              {value: 135, name: '视频广告'},
                              {value: 1548, name: '搜索引擎'}
                          ]
                      }
                    ]
             } ;
             //3.配置百度Echarts的Option
             myChart.setOption(option)   ;

</script>
</div>

</body>
</html>

阅读全文

'); })();