echarts小demo

最新推荐文章于 2023-02-05 13:54:39 发布
Monkey Wen
最新推荐文章于 2023-02-05 13:54:39 发布
阅读量150
点赞数
分类专栏：笔记
本文链接：https://blog.csdn.net/nujiwala/article/details/104646423
版权
笔记专栏收录该内容
4 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

<script src="../js/echarts/china.js" charset="utf-8"></script>
<div id="china_chart" style="width: 1000px;height:600px"></div>
<script>
   // 初始化echarts示例mapChart
   var mapChart = echarts.init(document.getElementById('china_chart'));
   //myData可以从后台获取
   // $(document).ready(function(){
   //     getData();
   // });
   // var myData =[];
   // function getData(){
   //     $.ajax({
   //         type:"POST",
   //         url : "/list",
   //         contentType: "application/json", //必须这样写
   //         dataType:"json",
   //         success:function(json){
   //           myData = json
   //        },
   //        })
   // }
    var yData = [];
    var myData = [
        {name: '海门', value: [121.15, 31.89,90]},
        {name: '鄂尔多斯', value: [109.781327, 39.608266,120]},
        {name: '招远', value: [120.38, 37.35,142]},
        {name: '舟山', value: [122.207216, 29.985295,123]}
    ]
    var data = [
        {name: '海门', value: 90},
        {name: '鄂尔多斯', value: 120},
        {name: '招远', value: 142},
        {name: '舟山', value: 123}];

    function NumDescSort(a,b){
        return a.value-b.value;
    }
    data.sort(NumDescSort)
    for (var i = 0; i < data.length; i++) {
        yData.push(i + data[i].name);
    }
   // mapChart的配置
   var option = {
      title: [{
          show: true,
          text: '排名情况',
          textStyle: {
              color: '#2D3E53',
              fontSize: 16
          },
          right: "26%",
          top: 150
      }],
      tooltip: {
          show: true,
          formatter: function(params) {
              return params.name + '：' + params.data['value']
          },
      },
      //条条的长度
      grid: {
          right: -30,
          top: 400,
          width: '30%'
      },
      xAxis: {
          show: false
      },
      yAxis: {
         type: 'category',
         inverse: true,
         nameGap: 14,
         axisLine: {
             show: false,
             lineStyle: {
                 color: '#ddd'
             }
         },
         axisTick: {
             show: false,
             lineStyle: {
                 color: '#ddd'
             }
         },
         //排名前面的长条
         axisLabel: {
             interval: 0,
             margin: 95,
             textStyle: {
                 color: '#455A74',
                 align: 'left',
                 fontSize: 8
             },
             rich: {
               //前三个
                 a: {
                     color: '#fff',
                     backgroundColor: '#FAAA39',
                     width: 10,
                     height: 10,
                     align: 'center',
                     borderRadius: 2
                 },
               //3个之后
                 b: {
                     color: '#fff',
                     backgroundColor: '#4197FD',
                     width: 10,
                     height: 10,
                     align: 'center',
                     borderRadius: 2
                 }
             },
            //前三颜色不同
             formatter: function(params) {
                 if (parseInt(params.slice(0, 1)) < 3) {
                     return [
                         '{a|' + (parseInt(params.slice(0, 1)) + 1) + '}' + '  ' + params.slice(1)
                     ].join('\n')
                 } else {
                     return [
                         '{b|' + (parseInt(params.slice(0, 1)) + 1) + '}' + '  ' + params.slice(1)
                     ].join('\n')
                 }
             }
         },
         data:yData
      },
      geo: {
            
             map: 'china',
            left: 'left',
            itemStyle: {               // 定义样式
                        normal: {              // 普通状态下的样式
                            areaColor: '#DEE1E6',
                            borderColor: '#5F6368'
                        },
                        emphasis: {                // 高亮状态下的样式
                            areaColor: '#ccc'
                        }
                    }
                },
               backgroundColor: '',      // 图表背景色
      series: [
            {
               name: '数量', // series名称
               type: 'scatter', // series图表类型
               coordinateSystem: 'geo' ,// series坐标系类型
               data: myData ,// series数据内容
               label: {
                           normal: {
                               formatter: '{b}:{@2}',
                               position: 'right',
                               show: false,
                           color:'#6F1616',
                           fontWeight:"800"
                           
                           },
                           emphasis: {
                               show: true
                           },
                        
                       },
            },
            {
                name: 'barSer',
                type: 'bar',
                roam: false,
                visualMap: false,
                zlevel: 2,
                barMaxWidth: 8,
                barGap: 0,
                itemStyle: {
                    normal: {
                        color: function(params) {
                            // build a color map as your need.
                            var colorList = [{
                                colorStops: [{
                                    offset: 0,
                                    color: '#FFD119' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: '#FFAC4C' // 100% 处的颜色
                                }]
                            },
                                {
                                    colorStops: [{
                                        offset: 0,
                                        color: '#00C0FA' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#2F95FA' // 100% 处的颜色
                                    }]
                                }
                            ];
                            if (params.dataIndex < 3) {
                                return colorList[0]
                            } else {
                                return colorList[1]
                            }
                        },
                        barBorderRadius: 15
                    }
                },
                data: data
            }
         ],
      
      visualMap: {
            type: 'continuous',
            orient: 'horizontal',
            itemWidth: 20,
            itemHeight: 160,
            text: ['高', '低'],
            showLabel: true,
            seriesIndex: [0],
            min: 0,
            max: 150,
            inRange: {
                color: ['#6FCF6A', '#FFFD64', '#FF5000']
            },
            textStyle: {
                color: '#7B93A7'
            },
            bottom: 30,
            left: 'left',
            
             }
   };
   
    mapChart.setOption(option);
</script>

</body>
</html>