django echats 百度地图省份块

用的笨方法,引用的china.js包,包在百度网盘联系分享

               <script src="{%static './js/china.js'%}"></script>
<!--                  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=VS0toIQjEjh3y8U7mur8P4HqGXEEooF5"></script>-->
              <script  >

//var myEcharts = echarts.init(document.getElementById("main0"));
var chartDom = document.getElementById("main0");
var myChart = echarts.init(chartDom);
 var option;
         option = {
            title: {  //标题样式
                text: '设备分布',
                x: "center",
                textStyle: {
                    fontSize: 18,
                    color: "black"
                },
            },
            tooltip: {  //这里设置提示框
                trigger: 'item',  //数据项图形触发
                backgroundColor: "#f3f5f9",  //提示框浮层的背景颜色。
                //字符串模板(地图): {a}(系列名称),{b}(区域名称),{c}(合并数值),{d}(无)
                formatter: '地区:{b}<br/>设备数量:{c}'
            },
            visualMap: {//视觉映射组件
                top: 'bottom',
                left: 'left',
                min: 0,
                max: 500,
                text: ['低', '高'],
                realtime: false,  //拖拽时,是否实时更新
                calculable: true,  //是否显示拖拽用的手柄
                inRange: {
                    color: ['lightskyblue', 'yellow', 'orangered']
                }
            },
            series: [
                {
                    name: '设备分布',
                    type: 'map',
                    mapType: 'china',
                    roam: false,//是否开启鼠标缩放和平移漫游
                    itemStyle: {//地图区域的多边形 图形样式
                        normal: {//是图形在默认状态下的样式
                            label: {
                                show: true,//是否显示标签
                                textStyle: {
                                    color: "black"
                                }
                            }
                        },
                        zoom: 1,  //地图缩放比例,默认为1
                        emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                            label: { show: true }
                        }
                    },
                    top: "10%",//组件距离容器的距离
                    data: [
                        { name: '北京', value: 10 },
                        { name: '天津', value: 0 },
                        { name: '上海', value: 0 },
                        { name: '重庆', value: 0 },
                        { name: '河北', value: 0 },
                        { name: '河南', value: 0 },
                        { name: '云南', value: 0 },
                        { name: '辽宁', value: 0 },
                        { name: '黑龙江', value: 0 },
                        { name: '湖南', value: 0 },
                        { name: '安徽', value: 0 },
                        { name: '山东', value: 0 },
                        { name: '新疆', value: 0 },
                        { name: '江苏', value: 0 },
                        { name: '浙江', value: 0 },
                        { name: '江西', value: 0 },
                        { name: '湖北', value: 0 },
                        { name: '广西', value: 0},
                        { name: '甘肃', value: 0},
                        { name: '山西', value: 0},
                        { name: '内蒙古', value: 0},
                        { name: '陕西', value: 0 },
                        { name: '吉林', value: 0 },
                        { name: '福建', value: 0},
                        { name: '贵州', value: 0 },
                        { name: '广东', value: 0 },
                        { name: '青海', value: 0},
                        { name: '西藏', value: 0},
                        { name: '四川', value: 0 },
                        { name: '宁夏', value: 0 },
                        { name: '海南', value: 0 },
                        { name: '台湾', value: 0},
                        { name: '香港', value: 0 },
                        { name: '澳门', value: 0}
                    ]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
option && myChart.setOption(option);

                                                   // 使用刚指定的配置项和数据显示图表。

            </script>
posted @ 2022-09-29 22:23  橘白CC  阅读(29)  评论(0编辑  收藏  举报