精华内容
下载资源
问答
  • 基于 Echarts 实现可视化数据大屏展示

    万次阅读 多人点赞 2019-09-05 15:28:48
    收集了一套基于 Echarts 实现可视化数据大屏响应式展示效果的源码,共计30个页面,可以在此基础上重新开发。 实现方式:html + Echarts 贴图 有需要的可以联系我 暂时不开源,之后会考虑写教程和开源项目。 ...

    前言

    收集了一套基于 Echarts 实现可视化数据大屏响应式展示效果的源码,共计30个页面,可以在此基础上重新开发。
    实现方式:html + Echarts

    贴图

    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    源码

    好了好了,现在开源代码;

    求源码的各位,码字不易,千万不要吝啬你们的Star点赞评论哦~

    github项目地址:https://github.com/lijie-1024/echarts

    没有github的可去我的资源下载压缩包:echars模板.7z,链接地址:https://download.csdn.net/download/weixin_43216105/11673691

    另附近期整理的地图解析的博客:使用echarts完成中国省市区县镇地图展示;

    如果本文对你有帮助的话,请不要忘记给我点赞留言打call哦(混个积分)~o( ̄▽ ̄)do
    有其他问题留言 over~

    展开全文
  • Echarts数据可视化全解

    千次阅读 2017-08-18 12:43:39
  • ECharts数据可视化学习

    2020-05-05 14:59:08
    ECharts数据可视化学习

    数据可视化

    • 数据可视化主要目的:借助于图形化手段,清晰有效地传达与沟通信息
    • 数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理

    可视化面板介绍

    • 应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出。

    01- 可视化适配方案

    • 设计稿是1920px
      • flexible.js 把屏幕分为 24 等份
        • flexible.js是淘宝官方H5移动适配解决方案
      • px2rwd 插件的基准值是 80px
        • webstorm 中将px转换为rem的插件
        • Preferences中的Px to Rwd设置基准值
        • 重新启动webstorm

    02-Echarts-介绍

    • 常见的数据可视化库
      • D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)
      • ECharts.js 百度出品的一个开源 Javascript 数据可视化库
      • Highcharts.js 国外的前端数据可视化库,非商用免费,被许多国外大公司所使用
      • AntV 蚂蚁金服全新一代数据可视化解决方案
      • HighchartsEcharts 就像是 OfficeWPS 的关系

    ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

    总结:

    03-Echarts-体验

    官方教程:[五分钟上手ECharts]

    使用步骤:

    1. 引入echarts 插件文件到html页面中
    2. 准备一个具备大小的DOM容器
    <div id="main" style="width: 600px;height:400px;"></div>
    
    1. 初始化echarts实例对象
    var myChart = echarts.init(document.getElementById('main'));
    
    1. 指定配置项和数据(option)
    var option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
        }]
    };
    
    1. 将配置项设置给echarts实例对象
    myChart.setOption(option);
    

    04-Echarts-基础配置

    需要了解的主要配置:series xAxis yAxis grid tooltip title legend color

    • series

      • 系列列表,每个系列通过 type 决定自己的图表类型
      • 图标数据,指定什么类型的图标,可以多个图表重叠。
    • xAxis

      • 直角坐标系 grid 中的 x 轴
      • boundaryGap
        • 坐标轴两边留白策略 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间
    • yAxis----- 直角坐标系 grid 中的 y 轴

    • grid----- 直角坐标系内绘图网格

    • title----- 标题组件

    • tooltip----- 提示框组件

    • legend-----图例组件

    • color-----调色盘颜色列表

    • 数据堆叠,同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。

    option = {
        // color设置我们线条的颜色 注意后面是个数组
        color: ['pink', 'red', 'green', 'skyblue'],
        // 设置图表的标题
        title: {
            text: '折线图堆叠123'
        },
        // 图表的提示框组件 
        tooltip: {
            // 触发方式
            trigger: 'axis'
        },
        // 图例组件
        legend: {
           // series里面有了 name值则 legend里面的data可以删掉
        },
        // 网格配置  grid可以控制线形图 柱状图 图表大小
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            // 是否显示刻度标签 如果是true 就显示 否则反之
            containLabel: true
        },
        // 工具箱组件  可以另存为图片等功能
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        // 设置x轴的相关配置
        xAxis: {
            type: 'category',
            // 是否让我们的线条和坐标轴有缝隙
            boundaryGap: false,
            data: ['星期一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
         // 设置y轴的相关配置
        yAxis: {
            type: 'value'
        },
        // 系列图表配置 它决定着显示那种类型的图表
        series: [
            {
                name: '邮件营销',
                type: 'line',
               
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '联盟广告',
                type: 'line',
    
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: '视频广告',
                type: 'line',
              
                data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
                name: '直接访问',
                type: 'line',
              
                data: [320, 332, 301, 334, 390, 330, 320]
            }
        ]
    };
    

    05- 柱状图图表(两大步骤)

    • 官网找到类似实例, 适当分析,并且引入到HTML页面中
    • 根据需求定制图表
    1. 引入到html页面中
    // 柱状图1模块
    (function() {
      // 实例化对象
      let myChart = echarts.init(document.querySelector(".bar .chart"));
      // 指定配置和数据
      let option = {
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器,坐标轴触发有效
            type: "shadow" // 默认为直线,可选为:'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: "60%",
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      };
    
      // 把配置给实例对象
      myChart.setOption(option);
    })();
    
    1. 根据需求定制
    • 修改图表柱形颜色 #2f89cf
    • 修改图表大小 top 为 10px bottom 为 4% grid决定我们的柱状图的大小
    color: ["#2f89cf"],
    grid: {
      left: "0%",
      top: "10px",
      right: "0%",
      bottom: "4%",
      containLabel: true
    },
    
    • X轴相关设置 xAxis
      • 文本颜色设置为 rgba(255,255,255,.6) 字体大小为 12px
      • X轴线的样式 不显示
    // 设置x轴标签文字样式
    // x轴的文字颜色和大小
         axisLabel: {
           color: "rgba(255,255,255,.6)",
           fontSize: "12"
         },
    //  x轴样式不显示
    axisLine: {
        show: false
        // 如果想要设置单独的线条样式 
        // lineStyle: {
        //    color: "rgba(255,255,255,.1)",
        //    width: 1,
        //    type: "solid"
       }
    }
    
    • Y 轴相关定制
      • 文本颜色设置为 rgba(255,255,255,.6) 字体大小为 12px
      • Y 轴线条样式 更改为 1像素的 rgba(255,255,255,.1) 边框
      • 分隔线的颜色修饰为 1像素的 rgba(255,255,255,.1)
    // y 轴文字标签样式
    axisLabel: {
          color: "rgba(255,255,255,.6)",
           fontSize: "12"
    },
     // y轴线条样式
     axisLine: {
          lineStyle: {
             color: "rgba(255,255,255,.1)",
             // width: 1,
             // type: "solid"
          }
    5232},
     // y 轴分隔线样式
    splitLine: {
        lineStyle: {
           color: "rgba(255,255,255,.1)"
         }
    }
    
    • 修改柱形为圆角以及柱子宽度 series 里面设置
    series: [
          {
            name: "直接访问",
            type: "bar",
            // 修改柱子宽度
            barWidth: "35%",
            data: [10, 52, 200, 334, 390, 330, 220],
            itemStyle: {
              // 修改柱子圆角
              barBorderRadius: 5
            }
          }
        ]
      };
    
    • 更换对应数据
    // x轴中更换data数据
     data: [ "旅游行业","教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业" ],
    // series 更换数据
     data: [200, 300, 300, 900, 1500, 1200, 600]
    
    • 让图表跟随屏幕自适应
    window.addEventListener("resize", function() {
      myChart.resize();
    });
    

    06-柱状图2定制

    • 官网找到类似实例, 适当分析,并且引入到HTML页面中
    • 根据需求定制图表
    1. 修改图形大小 grid
    // 图标位置
      grid: {
        top: "10%",
        left: "22%",
        bottom: "10%"
      },
    
    1. 不显示x轴
    xAxis: {
       show: false
     },
    
    1. y轴相关定制
    • 不显示y轴线和相关刻度
    //不显示y轴线条
    axisLine: {
        show: false
            },
    // 不显示刻度
    axisTick: {
       show: false
    },
    
    • y轴文字的颜色设置为白色
       axisLabel: {
              color: "#fff"
       },
    
    1. 修改第一组柱子相关样式(条状)
    name: "条",
    // 柱子之间的距离
    barCategoryGap: 50,
    //柱子的宽度
    barWidth: 10,
    // 柱子设为圆角
    itemStyle: {
        normal: {
          barBorderRadius: 20,       
        }
    },
    
    • 设置第一组柱子内百分比显示数据
    // 图形上的文本标签
    label: {
        normal: {
             show: true,
             // 图形内显示
             position: "inside",
             // 文字的显示格式
             formatter: "{c}%"
         }
    },
    
    • 设置第一组柱子不同颜色
    // 声明颜色数组
    var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
    // 2. 给 itemStyle  里面的color 属性设置一个 返回值函数
      itemStyle: {
              normal: {
                barBorderRadius: 20,  
                // params 传进来的是柱子对象
                console.log(params);
                // dataIndex 是当前柱子的索引号
                return myColor[params.dataIndex];
              }
             
    },
    
    1. 修改第二组柱子的相关配置(框状)
      	    name: "框",
            type: "bar",
            barCategoryGap: 50,
            barWidth: 15,
            itemStyle: {
                color: "none",
                borderColor: "#00c1de",
                borderWidth: 3,
                barBorderRadius: 15
            },
            data: [19325, 23438, 31000, 121594, 134141, 681807]
          }
    
    1. 给y轴添加第二组数据
    yAxis: [
          {
          type: "category",
          data: ["印尼", "美国", "印度", "中国", "世界人口(万)"],
          // 不显示y轴的线
          axisLine: {
            show: false
          },
          // 不显示刻度
          axisTick: {
            show: false
          },
          // 把刻度标签里面的文字颜色设置为白色
          axisLabel: {
            color: "#fff"
          }
        },
          {
            show: true,
            data: [702, 350, 610, 793, 664],
               // 不显示y轴的线
          axisLine: {
            show: false
          },
          // 不显示刻度
          axisTick: {
            show: false
          },
            axisLabel: {
              textStyle: {
                fontSize: 12,
                color: "#fff"
              }
            }
          }
        ],
    
    1. 设置两组柱子层叠以及更换数据
    // 给series  第一个对象里面的 添加 
    yAxisIndex: 0,
    // 给series  第二个对象里面的 添加 
    yAxisIndex: 1,
    // series 第一个对象里面的data
    data: [70, 34, 60, 78, 69],
    // series 第二个对象里面的data
    data: [100, 100, 100, 100, 100],
    // y轴更换第一个对象更换data数据
    data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
    // y轴更换第二个对象更换data数据
    data:[702, 350, 610, 793, 664],
    

    07-折线图1 人员变化模块制作

    • 官网找到类似实例, 适当分析,并且引入到HTML页面中
    • 根据需求定制图表
    1. 修改折线图大小,显示边框设置颜色:#012f4a,并且显示刻度标签。
        // 设置网格样式
        grid: { 
          top: '20%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          show: true,// 显示边框
          borderColor: '#012f4a',// 边框颜色
          containLabel: true // 包含刻度文字在内
        },
    
    1. 修改图例组件中的文字颜色 #4c9bfd, 距离右侧 right 为 10%
     // 图例组件
        legend: {
          textStyle: {
            color: '#4c9bfd' // 图例文字颜色
          },
          right: '10%' // 距离右边10%
        },
    
    1. x轴相关配置
    • 刻度去除
    • x轴刻度标签字体颜色:#4c9bfd
    • 剔除x坐标轴线颜色(将来使用Y轴分割线)
    • 轴两端是不需要内间距 boundaryGap
        xAxis: {
          type: 'category',
          data: ["周一", "周二"],
    	  axisTick: {
             show: false // 去除刻度线
           },
           axisLabel: {
             color: '#4c9bfd' // 文本颜色
           },
           axisLine: {
             show: false // 去除轴线
           },
           boundaryGap: false  // 去除轴内间距
        },
    
    1. y轴的定制
    • 刻度去除
    • 字体颜色:#4c9bfd
    • 分割线颜色:#012f4a
        yAxis: {
          type: 'value',
          axisTick: {
            show: false  // 去除刻度
          },
          axisLabel: {
            color: '#4c9bfd' // 文字颜色
          },
          splitLine: {
            lineStyle: {
              color: '#012f4a' // 分割线颜色
            }
          }
        },
    
    1. 两条线形图定制
    • 颜色分别:#00f2f1 #ed3f35
    • 把折线修饰为圆滑 series 数据中添加 smooth 为 true
        color: ['#00f2f1', '#ed3f35'],
    	series: [{
          name:'新增粉丝',
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          // 折线修饰为圆滑
          smooth: true,
          },{
          name:'新增游客',
          data: [100, 331, 200, 123, 233, 543, 400],
          type: 'line',
          smooth: true,
        }]
    
    1. 配置数据
    // x轴的文字
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    
    // 图标数据
        series: [{
          name:'新增粉丝',
          data:  [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
          type: 'line',
          smooth: true
        },{
          name:'新增游客',
          data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],     
          type: 'line',
          smooth: true
          }
        }]
    
    1. 新增需求 点击 2020年 2021年 数据发生变化

    以下是后台送过来数据(ajax请求过来的)

     var yearData = [
          {
            year: '2020',  // 年份
            data: [  // 两个数组是因为有两条线
                 [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
                 [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
              ]
          },
          {
            year: '2021',  // 年份
            data: [  // 两个数组是因为有两条线
                 [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
         		[143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
              ]
          }
         ];
    
    • tab栏切换事件
    • 点击2020按钮 需要把 series 第一个对象里面的data 换成 2020年对象里面data[0]
    • 点击2020按钮 需要把 series 第二个对象里面的data 换成 2020年对象里面data[1]
    • 2021 按钮同样道理

    08-折线图2 播放量模块制作

    • 官网找到类似实例, 适当分析,并且引入到HTML页面中
    • 根据需求定制图表
    1. 更换图例组件文字颜色 rgba(255,255,255,.5) 文字大小为12
     legend: {
          top: "0%",
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12"
          }
    },
    
    1. 修改图表大小
    grid: {
          left: "10",
          top: "30",
          right: "10",
          bottom: "10",
          containLabel: true
        },
    
    1. 修改x轴相关配置
    • 修改文本颜色为rgba(255,255,255,.6) 文字大小为 12
    • x轴线的颜色为 rgba(255,255,255,.2)
         // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
         axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12
              }
            },
             // x轴线的颜色为   rgba(255,255,255,.2)
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.2)"
              }
            },
    
    1. 修改y轴的相关配置
            axisTick: { show: false },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)"
              }
            },
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12
              }
            },
    	   // 修改分割线的颜色
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)"
              }
            }
          
    
    1. 修改两个线模块配置(注意在series 里面定制)
           //第一条 线是圆滑
           smooth: true,
            // 单独修改线的样式
            lineStyle: {
                color: "#0184d5",
                width: 2 
            },
             // 填充区域
            areaStyle: {
                  // 渐变色,只需要复制即可
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(1, 132, 213, 0.4)"   // 渐变色的起始颜色
                    },
                    {
                      offset: 0.8,
                      color: "rgba(1, 132, 213, 0.1)"   // 渐变线的结束颜色
                    }
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)"
            },
            // 设置拐点 小圆点
            symbol: "circle",
            // 拐点大小
            symbolSize: 8,
            // 设置拐点颜色以及边框
           itemStyle: {
                color: "#0184d5",
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: 12
            },
            // 开始不显示拐点, 鼠标经过显示
            showSymbol: false,
    
           name: "转发量",
            type: "line",
            smooth: true,
            lineStyle: {
              normal: {
                color: "#00d887",
                width: 2
              }
             },
             areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0, 216, 135, 0.4)"
                    },
                    {
                      offset: 0.8,
                      color: "rgba(0, 216, 135, 0.1)"
                    }
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)"
              }
            },
            // 设置拐点 小圆点
            symbol: "circle",
            // 拐点大小
            symbolSize: 5,
            // 设置拐点颜色以及边框
             itemStyle: {
                color: "#00d887",
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: 12
            },
            // 开始不显示拐点, 鼠标经过显示
            showSymbol: false,
    
    1. 更换数据
    // x轴更换数据
    data: [ "01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","26","28","29","30"],
    // series  第一个对象data数据
     data: [ 30, 40, 30, 40,30, 40, 30,60,20, 40, 30, 40, 30, 40,30, 40, 30,60,20, 40, 30, 40, 30, 40,30, 40, 20,60,50, 40],
    // series  第二个对象data数据
     data: [ 130, 10, 20, 40,30, 40, 80,60,20, 40, 90, 40,20, 140,30, 40, 130,20,20, 40, 80, 70, 30, 40,30, 120, 20,99,50, 20],
    

    09-饼形图 1年龄分布模块制作

    • 官网找到类似实例, 适当分析,并且引入到HTML页面中
    • 根据需求定制图表

    定制图表需求1:

    • 修改图例组件在底部并且居中显示。
    • 每个小图标的宽度和高度修改为 10px
    • 文字大小为12 颜色 rgba(255,255,255,.5)
     legend: {
          // 距离底部为0%
          bottom: "0%",
          // 小图标的宽度和高度
          itemWidth: 10,
          itemHeight: 10,
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
          // 修改图例组件的文字为 12px
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12"
          }
     },
    

    定制需求2:

    • 修改水平居中 垂直居中
    • 修改内圆半径和外圆半径为 [“40%”, “60%”] pink老师友情提示,带有直角坐标系的比如折线图柱状图是 grid修改图形大小,而我们饼形图是通过 radius 修改大小
    series: [
          {
            name: "年龄分布",
            type: "pie",
            // 设置饼形图在容器中的位置
            center: ["50%", "50%"],
            //  修改内圆半径和外圆半径为  百分比是相对于容器宽度来说的
            radius: ["40%", "60%"],
            // 不显示标签文字
            label: { show: false },
            // 不显示连接线
            labelLine: { show: false },
          }
        ]
    

    定制需求3:更换数据

    // legend 中的data  可省略
    data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"],
    //  series 中的数据
     data: [
              { value: 1, name: "0岁以下" },
              { value: 4, name: "20-29岁" },
              { value: 2, name: "30-39岁" },
              { value: 2, name: "40-49岁" },
              { value: 1, name: "50岁以上" }
     ] ,
    

    定制需求4: 更换颜色

    color: [
              "#065aab",
              "#066eab",
              "#0682ab",
              "#0696ab",
              "#06a0ab",
            ],
    
     // 4. 让图表跟随屏幕自动的去适应
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    

    10-饼形图2 地区分布模块制作(南丁格尔玫瑰图)

    • 官网找到类似实例, 适当分析,并且引入到HTML页面中
    • 根据需求定制图表

    第二步:按照需求定制

    • 需求1:颜色设置
    color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
    
    • 需求2:修改饼形图大小 ( series对象)
    radius: ['10%', '70%'],
    
    • 需求3: 把饼形图的显示模式改为 半径模式
     roseType: "radius",
    
    • 需求4:数据使用更换(series对象 里面 data对象)
              { value: 20, name: '云南' },
              { value: 26, name: '北京' },
              { value: 24, name: '山东' },
              { value: 25, name: '河北' },
              { value: 20, name: '江苏' },
              { value: 25, name: '浙江' },
              { value: 30, name: '四川' },
              { value: 42, name: '湖北' }
    
    • 需求5:字体略小些 10 px ( series对象里面设置 )

      饼图图形上的文本标签可以控制饼形图的文字的一些样式。 label 对象设置

    series: [
          {
            name: "面积模式",
            type: "pie",
            radius: [30, 110],
            center: ["50%", "50%"],
            roseType: "radius",
            // 文本标签控制饼形图文字的相关样式, 注意它是一个对象
            label: {
              fontSize: 10
            },
          }
        ]
      };
    
    • 需求6:防止缩放的时候,引导线过长。引导线略短些 (series对象里面的 labelLine 对象设置 )
      • 连接图表 6 px
      • 连接文字 8 px
    +        // 文字调整
    +        label:{
    +          fontSize: 10
    +        },
    +        // 引导线调整
    +        labelLine: {
    +          // 连接扇形图线长
    +          length: 6,
    +          // 连接文字线长
    +          length2: 8
    +        } 
    +      }
    +    ],
    
    
    • 需求6:浏览器缩放的时候,图表跟着自动适配。
    // 监听浏览器缩放,图表对象调用缩放resize函数
    window.addEventListener("resize", function() {
        myChart.resize();
      });
    

    11-Echarts-社区介绍

    社区就是一些,活跃的echart使用者,交流和贡献定制好的图表的地方。

    • 在这里可以找到一些基于echart的高度定制好的图表,相当于基于jquery开发的插件,这里是基于echarts开发的第三方的图表。

    12-Echarts-map使用(扩展)

    参考社区的例子:https://gallery.echartsjs.com/editor.html?c=x0-ExSkZDM
    (模拟飞机航线)

    实现步骤:

    • 第一需要下载china.js提供中国地图的js文件
    • 第二个因为里面代码比较多,我们新建一个新的js文件 myMap.js 引入
    • 使用社区提供的配置即可。

    需要修改:

    • 去掉标题组件
    • 去掉背景颜色
    • 修改地图省份背景 #142957 areaColor 里面做修改
    • 地图放大通过 zoom 设置为1.2即可
        geo: {
          map: 'china',
          zoom: 1.2,
          label: {
            emphasis: {
              show: false
            }
          },
          roam: false,
          itemStyle: {
            normal: {
              areaColor: '#142957',
              borderColor: '#0692a4'
            },
            emphasis: {
              areaColor: '#0b1c2d'
            }
          }
        },
    

    总结:这例子是扩展案例,大家以后可以多看看社区里面的案例。

    13- 最后约束缩放

    /* 约束屏幕尺寸 */
    @media screen and (max-width: 1024px) {
      html {
        font-size: 42px !important;
      }
    }
    @media screen and (min-width: 1920px) {
      html {
        font-size: 80px !important;
      }
    }
    

    14-总结

    • 偶然的机会,在做自己项目的时候想添加一个百度地图的功能,就在B站搜学习视频,搜到了pink老师的ECharts的视频,觉得很有意思,就记录一下学习过程,以后有机会再更加深入学习一下😊
    展开全文
  • Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解点击进入其他功能详解: Echarts数据可视化title详解 Echarts数据可视化tooltip详解 Echarts数据可视化toolbox详解 Echarts数据可视化...
    
        ad1.jpg
    

    全栈工程师开发手册 (作者:栾鹏)

    Echarts数据可视化开发代码注释全解
    Echarts数据可视化开发参数配置全解

    6大公共组件详解(点击进入):
    title详解tooltip详解toolbox详解legend详解dataZoom详解visualMap全解

    5大坐标系详解(点击进入):
    地理坐标系geo详解grid直角坐标系(xAxis、yAxis)详解parallel平行坐标系详解polar极坐标系详解radar雷达坐标系详解

    19种图表类型详解(点击进入,待续):
    series-bar柱形图详解series-effectscatter特效散点图series-graph关系图series-heatmap热力图series-line线图series-map地图series-pie饼图series-radar雷达图series-scatter散点图

    图表行为和图表事件:
    action图表行为event图表事件

    Echarts数据可视化series-scatter散点图全解:

    mytextStyle={
        color:"#333",               //文字颜色
        fontStyle:"normal",         //italic斜体  oblique倾斜
        fontWeight:"normal",        //文字粗细bold   bolder   lighter  100 | 200 | 300 | 400...
        fontFamily:"sans-serif",    //字体系列
        fontSize:18,                  //字体大小
    };
    mylineStyle={
        color:"#333",               //颜色,'rgb(128, 128, 128)','rgba(128, 128, 128, 0.5)',支持线性渐变,径向渐变,纹理填充
        shadowColor:"red",          //阴影颜色
        shadowOffsetX:0,            //阴影水平方向上的偏移距离。
        shadowOffsetY:0,            //阴影垂直方向上的偏移距离
        shadowBlur:10,              //图形阴影的模糊大小。
        type:"solid",               //坐标轴线线的类型,solid,dashed,dotted
        width:1,                    //坐标轴线线宽
        opacity:1,                  //图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形
    };
    myareaStyle={
        color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],//分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
        shadowColor:"red",          //阴影颜色
        shadowOffsetX:0,            //阴影水平方向上的偏移距离。
        shadowOffsetY:0,            //阴影垂直方向上的偏移距离
        shadowBlur:10,              //图形阴影的模糊大小。
        opacity:1,                  //图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形
    };
    myitemStyle={
        color:"red",                 //颜色
        borderColor:"#000",         //边框颜色
        borderWidth:0,              //柱条的描边宽度,默认不描边。
        borderType:"solid",         //柱条的描边类型,默认为实线,支持 'dashed', 'dotted'。
        barBorderRadius:0,          //柱形边框圆角半径,单位px,支持传入数组分别指定柱形4个圆角半径。
        shadowBlur:10,              //图形阴影的模糊大小。
        shadowColor:"#000",         //阴影颜色
        shadowOffsetX:0,            //阴影水平方向上的偏移距离。
        shadowOffsetY:0,            //阴影垂直方向上的偏移距离。
        opacity:1,                  //图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
    };
    mylabel={
        show:false,                  //是否显示标签。
        position:"inside",          //标签的位置。// 绝对的像素值[10, 10],// 相对的百分比['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight'
        offset:[30, 40],             //是否对文字进行偏移。默认不偏移。例如:[30, 40] 表示文字在横向上偏移 30,纵向上偏移 40。
        formatter:'{b}: {c}',       //标签内容格式器。模板变量有 {a}、{b}、{c},分别表示系列名,数据名,数据值。
        textStyle:mytextStyle
    };
    mypoint={
        symbol:"pin",               //图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
        symbolSize:50,              //标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10。
        symbolRotate:0,             //标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。
        symbolOffset:[0,0],         //标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置
        silent:false,               //图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
        label:{
            normal:mylabel,
            emphasis:mylabel
        },
        itemStyle:{
            normal:myitemStyle,
            emphasis:myitemStyle
        }
    };
    myline={
        symbol:["pin","circle"],    //图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
        symbolSize:50,              //标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10。
        precision:2,                //标线数值的精度,在显示平均值线的时候有用。
        silent:false,               //图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
        label:{
            normal:mylabel,
            emphasis:mylabel
        },
        lineStyle:{
            normal:mylineStyle,
            emphasis:mylineStyle
        }
    };
    myarea={
        silent:false,               //图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
        label:{
            normal:mylabel,
            emphasis:mylabel
        },
        itemStyle:{
            normal:myitemStyle,
            emphasis:myitemStyle
        }
    };
    series=[
    {
        type:"scatter",             //散点图
        zlevel:0,                   //柱状图所有图形的 zlevel 值。
        z:2,                         //柱状图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
        silent:false,               //图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
        name:"数据名称",             //系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。
        legendHoverLink:true,       //是否启用图例 hover 时的联动高亮。
        hoverAnimation:true,        //是否开启鼠标 hover 的提示动画效果。
        coordinateSystem:"geo",     //'cartesian2d'使用二维的直角坐标系。'geo'使用地理坐标系
        xAxisIndex:0,                //使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。
        yAxisIndex:0,                //使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。
        polarIndex:0,                //使用的极坐标系的 index,在单个图表实例中存在多个极坐标系的时候有用。
        geoIndex:0,                  //使用的地理坐标系的 index,在单个图表实例中存在多个地理坐标系的时候有用。
        calendarIndex:0,            //使用的日历坐标系的 index,在单个图表实例中存在多个日历坐标系的时候有用。
        symbol:"pin",               //图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
        symbolSize:50,              //标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10。
        symbolRotate:0,             //标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。
        symbolOffset:[0,0],         //标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置
        large:false,                //是否开启大规模散点图的优化,在数据图形特别多的时候(>=5k)可以开启。开启后配合 largeThreshold 在数据量大于指定阈值的时候对绘制进行优化。缺点:优化后不能自定义设置单个数据项的样式。
        largeThreshold:2000,        //开启绘制优化的阈值。
        cursor:"pointer",           //鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor。
        label:{                      //图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,
            normal:mylabel,
            emphasis:mylabel
        },
        itemStyle:{                 //图形样式,normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。
            normal:myitemStyle,
            emphasis:myitemStyle,
        },
        encode: {                    //可以定义 data 的哪个维度被编码成什么
            x: [3, 1, 5],             // 表示维度 3、1、5 映射到 x 轴。
            y: 2,                     // 表示维度 2 映射到 y 轴。
            tooltip: [3, 2, 4],      // 表示维度 3、2、4 会在 tooltip 中显示。
            label: 3                 // 表示 label 使用维度 3。
        },
        data: [                      //每一列称为一个『维度』。维度下标从0开始
            [12, 44, 55, 66, 2],
            [23, 6, 16, 23, 1],
            [12, 44, 55, 66, 2],
            [23, 6, 16, 23, 1],
            [12, 44, 55, 66, 2],
            [23, 6, 16, 23, 1],
        ],
        //markPoint:同bar
        //markLine:同bar
        //markArea:同bar
        tooltip:tooltip  //index.js
    },
    
    ];
    
    展开全文
  • Echarts数据可视化全解注释

    万次阅读 多人点赞 2017-08-04 19:33:59
    自己喜欢边学边总结边写demo,所以写了这篇文章,包含了大部分的Echarts编程知识。让你一个demo掌握Echarts所有编程,如果有问题可以留言。 此demo除了必须的链接文件外,主要包括17个文件:index.html和index.js...
  • echarts数据可视化

    2021-03-01 11:06:51
    熟悉echarts数据可视化的使用方法 实现原理 echarts是百度开发的前端可视化类库,现在已经成为Apache软件基金会的顶级项目,在可视化领域使用广泛。本实验主要介绍echarts的基本使用,并生成一些简答的图表。 通常会...
  • 涉及的技术栈 基于 flexible. js+rem智能大屏适配 VScode cssrem插件 Flex布局 Less使用 基于ECharts数据可视化展示 ECharts柱状图数据设置 ECharts地图引入 可视化面板布局适配 Echarts 柱状图展示
  • Echarts数据可视化

    千次阅读 2020-12-20 22:45:55
    Echarts 缩写来自 Enterprise Charts(商业级数据图表),是百度的一个开源的数据可视化工具 Echarts 能够绘制 2D 和 3D 的饼状图、柱状图、折线图等几乎所有我们能够见到的图形 Echarts 能够在 PC 端和移动设备...
  • 基于vue+echarts 数据可视化大屏展示[附源码]

    万次阅读 多人点赞 2020-01-02 22:54:40
    访问 获取源码 精准模板教程~
  • Echarts 数据可视化

    2020-12-22 16:46:13
    Echarts 缩写来自 Enterprise Charts(商业级数据图表),是百度的一个开源的数据可视化工具 Echarts 能够绘制 2D 和 3D 的饼状图、柱状图、折线图等几乎所有我们能够见到的图形 Echarts 能够在 PC 端和移动设备上...
  • Echarts 数据可视化》的送书活动完美结束(第一本 ECharts 数据可视化书籍出版了!)虽然只有一本书,但是可是有作者的亲笔签名哦。获奖者就是:请这位同学在粉丝群找我,谢谢!扫...
  • 前端Echarts数据可视化

    2020-11-09 17:16:51
    ECharts.js 百度出品的一个开源 Javascript 数据可视化库 Highcharts.js 国外的前端数据可视化库,非商用免费,被许多国外大公司所使用 AntV 蚂蚁金服全新一代数据可视化解决方案 等等 Highcharts 和
  • Echarts数据可视化驾驶舱页面20款,前端大数据看板,实用,代码
  • Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解6大公共组件详解(点击进入): title详解、 tooltip详解、toolbox详解、legend详解、dataZoom详解、visualMap全解 5大坐标系详解(点击...
  • 来源:ECharts数据可视化项目(PS:这个老师讲的不错,风趣生动) Echarts-介绍 常见的数据可视化库: D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难) ECharts.js 百度出品的一个开源 Javascript ...
  • ECharts数据可视化插件

    2020-02-11 21:14:58
    ECharts,一个使用JavaScript实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可...
  • Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解6大公共组件详解(点击进入): title详解、 tooltip详解、toolbox详解、legend详解、dataZoom详解、visualMap全解 5大坐标系详解(点击...
  • Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解、 tooltip详解、toolbox详解、legend详解、dataZoom详解、visualMap全解 5大坐标系详解(点击...
  • Echarts数据可视化visualMap,开发全解+完美注释

    万次阅读 多人点赞 2017-08-06 09:07:32
    visualMap=[ //视觉映射组件,用于进行『视觉编码』,也就是将数据映射到视觉元素。视觉元素可以是:symbol: 图元的图形类别。symbolSize: 图元的大小。color: 图元的颜色。 // colorAlpha: 图元的颜色的透明度。...
  • Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解、 tooltip详解、toolbox详解、legend详解、dataZoom详解、visualMap全解 5大坐标系详解(点击...
  • Echarts数据可视化开发参数配置全解

    万次阅读 多人点赞 2017-08-15 19:22:54
    Echarts简介6个公共组件: Echarts工具的完整使用包括title标题、tooltip提示框、toolbox工具栏、legend图例、dataZoom缩放控制、visualMap视觉映射,6个公共组件。...19种类型的数据图表: 包括b
  • 大家可以看看是否对自己有帮助:点击打开 docker/kubernetes入门视频教程 全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入):...
  • echarts数据可视化图表(一):柱状图 效果图: 代码如下: 注意:需引用echarts.js <script src="js/4.2.1/echarts.min.js"></script> html <div class="box-echarts" id="Echarts05">&...
  • ECharts数据可视化项目

    2020-09-26 22:05:02
    项目展示 学习视频:https://www.bilibili.com/video/BV1v7411R7mp?p=1 个人博客:https://highfish920.github.io/ 代码地址:https://github.com/highfish920/ECharts-
  • L说:这是朋友王大伟的著作,推荐大家购买。我的第一本书终于出版了,书名叫做《ECharts数据可视化:入门、实战与进阶》,目前在当当、京东已经上架,可购买学习!什么是EChartsECh...
  • 文章目录DAY01-可视化项目01-项目介绍02-使用技术03-Echarts-介绍04-Echarts-体验初始化echarts实例对象05-Echarts-基础配置06-REM适配07-基础布局08-边框图片09-公用面板样式10-概览区域(overview)-布局11-监控区域...
  • Echarts数据可视化tooltip提示框,开发全解+完美注释

    万次阅读 多人点赞 2017-08-06 09:03:27
    trigger: 'item', //触发类型,'item'数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。 'axis'坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。 triggerOn:"mousemove", //提示框触发的...
  • Spark-echarts数据可视化

    2020-08-19 14:37:47
    简介 教程:...代码 js的提取文件 链接:https://pan.baidu.com/s/1JbmCR5KiU9PdOwJ6_E0bew 提取码:ubpi 前端 <!DOCTYPE html> <html> <head> <meta charset="utf-8">
  • Echarts数据可视化legend图例详解:

    千次阅读 2018-11-06 16:16:37
    代码片 下面展示一些 内联代码片。 Echarts数据可视化legend图例详解: // An highlighted block legend={ show:true, //是否显示 zlevel:0, //所属图形的Canvas分层,zlev...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,652
精华内容 3,460
关键字:

echarts数据可视化代码