echarts实例-cloud字符云图、map中国数据地图、循环换色的柱状图

最新推荐文章于 2024-02-28 15:00:52 发布

吕驴驴

最新推荐文章于 2024-02-28 15:00:52 发布

阅读量472

点赞数

分类专栏：前端插件文章标签： js

本文链接：https://blog.csdn.net/weixin_44369335/article/details/106255825

版权

前端插件专栏收录该内容

18 篇文章 1 订阅

订阅专栏

在这里插入图片描述 ## 需要china.js或者其他省份的js或者json的可以去echarts官方下载

echarts官方gitHub，map文件夹下是地图的依赖
 echarts扩展wordcloud云图github

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{margin: 0;padding: 0;box-sizing: border-box;}
    a{text-decoration: none;}
    ul,ol{list-style: none;}
    img,button,input{outline: none;}
    html,body{min-width: 100%;height: 100%;font-family:Microsoft YaHei;font-size: 14px;}
    .clear:after{display: block;content:'';clear: both;}
    .echarts-wrap{
      margin-top: 20px;
    }
    .echarts-wrap>ul>li{
      float: left;
      width: 100px;
      color: #fff;
      background: rgba(65,109,158,1);
      float: left;
      height: 30px;
      line-height: 30px;
      text-align: center;
      font-weight: bold;
      cursor: pointer;
      box-shadow:1px 0px 0px 0px rgba(178,181,190,0.4), -1px 0px 0px 0px rgba(178,181,190,0.4), 0px -1px 0px 0px rgba(178,181,190,0.4);
      border-radius:4px 4px 0px 0px;
      margin-right: 6px;
    }
    .echarts-wrap>ul>li.active{
      color: rgba(65,109,158,1);
      background-color: #fff;
    }
    .echarts-wrap>div{
      position: relative;
      height: 440px;
    }
    .echarts-item{
      width: 100%;
      padding: 10px;
      height: 440px;
      background-color: #fff;
      border-radius:0 4px 4px 4px;
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
    }
    .echarts-item>div,.echarts-item canvas{
      width: 100%!important;
      height: 100%!important;
    }
  </style>
</head>
<body>
  <div class="echarts-wrap">
    <ul class="clear">
      <li class="active">云图</li>
      <li>地图</li>
      <li>柱状图</li>
    </ul>
    <div >
      <div class="echarts-item hot-word" style="z-index: 2;">
        <div id="echarts-word"></div>
      </div>
      <div class="echarts-item map-wrap">
        <div id="echarts-map"></div>
      </div>
      <div class="echarts-item video-source">
        <div id="echarts-source"></div>
      </div>
    </div>
  </div>
  <script src="./jquery-1.9.1.min.js"></script>
  <script src="./echarts.min.js"></script>
  <script src="./china.js"></script>
  <script src="./echarts-wordcloud.min.js"></script>
  <script>
    $('.echarts-wrap>ul>li').click(function(){
    $(this).addClass('active').siblings().removeClass('active')
    $('.echarts-item').eq($(this).index()).css('z-index',2).siblings().css('z-index',1);
  })
  // 词云
  var cloudChart = echarts.init(document.getElementById('echarts-word'));
  cloudChart.setOption({
      series: [{
        type: 'wordCloud',
        gridSize: 5,
        sizeRange: [12, 50],
        rotationRange: [-90, 90],
        shape: 'circle',
        width: 400,
        height: 400,
        drawOutOfBound: true,
            textStyle: {
                normal: {
                    color: function () {
                        return 'rgb(' + [
                                Math.round(Math.random() * 255),
                                Math.round(Math.random() * 255),
                                Math.round(Math.random() * 255)
                            ].join(',') + ')';
                    }
                },
                emphasis: {
                    shadowBlur: 10,
                    shadowColor: ''
                }
            },
          // Data is an array. Each array item must have name and value property.
          data: [
            {
              name: '国务院',
              value: 7
            },
            {
              name: '量化',
              value: 7
            },
            {
              name: '金融',
              value: 7
            },
            {
              name: '三峡工程',
              value: 7
            },
            {
              name: '建设',
              value: 7
            },
            {
              name: '董事长',
              value: 6
            },
            {
              name: '委员会',
              value: 6
            },
            {
              name: '主任',
              value: 6
            },
            {
              name: '长江三峡',
              value: 6
            },
            {
              name: '分析',
              value: 5
            },
            {
              name: '党组',
              value: 5
            },
            {
              name: '交易',
              value: 5
            },
            {
              name: '中国',
              value: 5
            },
            {
              name: '集团公司',
              value: 5
            },
            {
              name: '分析',
              value: 5
            },
            {
              name: '党组',
              value: 5
            },
            {
              name: '交易',
              value: 5
            },
            {
              name: '中国',
              value: 5
            },
            {
              name: '集团公司',
              value: 5
            },
            {
              name: '中国',
              value: 5
            },
            {
              name: '集团公司',
              value: 5
            },
            {
              name: '开发',
              value: 1
            },
            {
              name: '知识',
              value: 1
            },
            {
              name: '加入',
              value: 1
            },
            {
              name: '当然',
              value: 1
            },
            {
              name: '第二日',
              value: 1
            },
            {
              name: '奥迪',
              value: 1
            },
            {
              name: '那你',
              value: 1
            },
            {
              name: '以为',
              value: 1
            },
            {
              name: '同居',
              value: 1
            },
            {
              name: '是个',
              value: 1
            },
            {
              name: '特意',
              value: 1
            },
            {
              name: '第二日',
              value: 1
            },
            {
              name: '奥迪',
              value: 1
            },
            {
              name: '那你',
              value: 1
            },
            {
              name: '以为',
              value: 1
            },
            {
              name: '同居',
              value: 1
            },
            {
              name: '是个',
              value: 1
            },
            {
              name: '特意',
              value: 1
            }
          ]
      }]
  });
  // 地图
  var mapChart = echarts.init(document.getElementById('echarts-map'));
  var mapOption = {
    tooltip : {
        trigger: 'item'
    },
    dataRange: {
        x: 'left',
        y: 'bottom',
        splitList: [
            {start: 1200, color: '#E94644'},
            {start: 900, end: 1200, color: '#ED6E6C'},
            {start: 600, end: 900, color: '#F29593'},
            {start: 300, end: 600, color: '#F7B7B6'},
            {start: 0, end: 300, color: '#FBF2F2'},
        ]
    },
    series : [
        {
            name: '文章数',
            type: 'map',
            showLegendSymbol: false,
            mapType: 'china',
            roam: false,
            top:'5px',
            bottom:'5px',
            itemStyle:{
                normal:{
                    label:{
                        show:true,
                        textStyle: {
                           color: "#333"
                        }
                    }
                }
            },
            emphasis:{label:{show:false}},
            data:[
                {name: '北京',value: Math.round(Math.random()*1000)},
                {name: '天津',value: Math.round(Math.random()*1000)},
                {name: '上海',value: Math.round(Math.random()*1000)},
                {name: '重庆',value: Math.round(Math.random()*1000)},
                {name: '河北',value: 0},
                {name: '河南',value: Math.round(Math.random()*1000)},
                {name: '云南',value: 5},
                {name: '辽宁',value: 305},
                {name: '黑龙江',value: Math.round(Math.random()*1000)},
                {name: '湖南',value: 200},
                {name: '安徽',value: Math.round(Math.random()*1000)},
                {name: '山东',value: Math.round(Math.random()*1000)},
                {name: '新疆',value: Math.round(Math.random()*1000)},
                {name: '江苏',value: Math.round(Math.random()*1000)},
                {name: '浙江',value: Math.round(Math.random()*1000)},
                {name: '江西',value: Math.round(Math.random()*1000)},
                {name: '湖北',value: Math.round(Math.random()*1000)},
                {name: '广西',value: Math.round(Math.random()*1000)},
                {name: '甘肃',value: Math.round(Math.random()*1000)},
                {name: '山西',value: Math.round(Math.random()*1000)},
                {name: '内蒙古',value: Math.round(Math.random()*1000)},
                {name: '陕西',value: Math.round(Math.random()*1000)},
                {name: '吉林',value: Math.round(Math.random()*1000)},
                {name: '福建',value: Math.round(Math.random()*1000)},
                {name: '贵州',value: Math.round(Math.random()*1000)},
                {name: '广东',value: Math.round(Math.random()*1000)},
                {name: '青海',value: Math.round(Math.random()*1000)},
                {name: '西藏',value: Math.round(Math.random()*1000)},
                {name: '四川',value: Math.round(Math.random()*1000)},
                {name: '宁夏',value: Math.round(Math.random()*1000)},
                {name: '海南',value: Math.round(Math.random()*1000)},
                {name: '台湾',value: Math.round(Math.random()*1000)},
                {name: '香港',value: Math.round(Math.random()*1000)},
                {name: '澳门',value: Math.round(Math.random()*1000)}
            ]
        }
    ]
  };
  mapChart.setOption(mapOption,true)
  // 柱状图
  var barChart = echarts.init(document.getElementById('echarts-source'));
  var barOption = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: function(params){
          return params[0].marker+'文章数: '+params[0].data+'条'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['人民网','新华网','中国新闻网','中国经济网','央广网','中青网','光明网','新京报'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '文章数',
            type: 'bar',
            barWidth: '25%',
            itemStyle: {
              normal: {
                  //每个柱子的颜色为一组，循环
                  color: function(params) {
                    var colorList = ['#DC997F','#829ECC','#AF9FBE','#9DC587','#8BC7CB','#A3B1C3','#84C2AC','#C2BBB4']
                    return colorList[params.dataIndex]
                  }
              }
            },
            data: [1180, 1008, 980, 700, 680, 620, 450, 350]
        }
    ]
  }
  barChart.setOption(barOption)
  $(window).resize(function(){
    cloudChart.resize();
    mapChart.resize();
    barChart.resize();
  })
  </script>
</body>
</html>

效果

在这里插入图片描述

吕驴驴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echarts实例-cloud字符云图、map中国数据地图、循环换色的柱状图

需要china.js或者其他省份的js或者json的可以去echarts官方下载echarts官方gitHub，map文件夹下是地图的依赖echarts扩展wordcloud云图github完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-
复制链接

扫一扫