码迷,mamicode.com
首页 > 其他好文 > 详细

echarts地图常见效果,雷达图,仪表盘

时间:2021-06-21 20:18:10      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:手机   width   show   雷达   var   地图   har   ret   doctype   

地图常见效果

<!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>
</head>
<body>
<div style="width: 800px;height: 600px"></div>
</body>
</html>
<script>
   var mcharts=echarts.init(document.querySelector(‘div‘))
   $.get(‘json/china.json‘,function (ret) {
       //ret是中国各个省份的矢量地图数据
       echarts.registerMap(‘chinaMap‘, ret)


       var option = {
           geo: {
               type: ‘map‘,
               map: ‘chinaMap‘,
               roam:true,//设置允许缩放及拖动
               label:{
                   show:true,//显示数据
               },
               zoom:1,//设置初始化缩放比例
               center:[87,43]//设置地图中心点
           }
       }
       mcharts.setOption(option)
   })
</script>

雷达图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
      <script src="echarts.min.js"></script>
</head>
<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    var hwScore = [80, 90, 80, 82, 90]
    var zxScore = [70, 82, 75, 70, 78]
    var dataMax = [
        {
            name: ‘易用性‘, max: 100
        },
        {
            name: ‘功能‘, max: 100
        },
        {
            name: ‘拍照‘, max: 100
        },
        {
            name: ‘跑分‘, max: 100
        },
        {
            name: ‘续航‘, max: 100
        }
    ]
    var mCharts = echarts.init(document.querySelector("div"))
    var option = {
        radar: {
            indicator: dataMax
        },
        series: [
            {
                type: ‘radar‘,
                data: [
                    {
                        name: ‘华为手机1‘,
                        value: hwScore
                    },
                    {
                        name: ‘中兴手机1‘,
                        value: zxScore
                    }
                ]
            }
        ]
    }
    mCharts.setOption(option)
</script>
</body>
</html>

仪表盘

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="echarts.min.js"></script>
</head>
<body>
<div style="width:600px;height:800px  "></div>

</body>
</html>
<script>
    var mcharts=echarts.init(document.querySelector(‘div‘))
    var option={
        series:[

            {
                type:‘gauge‘,
                data:[
                    {value:99,
                     itemStyle:{
                        color:‘red‘,
                     }
                    },
                    {value:66}
                ],
                min:60,
            }
        ]
    }
       mcharts.setOption(option)
</script>

 

echarts地图常见效果,雷达图,仪表盘

标签:手机   width   show   雷达   var   地图   har   ret   doctype   

原文地址:https://www.cnblogs.com/zhanghua-lijie/p/14910033.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!