数据可视化项目【二】Echarts图表模块

系列文章目录

第一章：数据可视化项目基础配置
第二章：数据可视化项目Echarts图表模块
第三章：数据可视化项目数据切换效果模块

---

---

Echarts

介绍：

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

• 是一个JS插件
• 性能好可流畅运行PC与移动设备
• 兼容主流浏览器
• 提供很多常用图表，且可定制。
  • 折线图、柱状图、散点图、饼图、K线图

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值后 后一个系列的值会在前一个系列的值上相加。

项目例子展示

项目中的图表模块都差不多的做法，我这边就放两个给大家参考

点位区域(point)-饼图

图片展示：

代码分析：

// 点位分布统计模块
(function() {
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".pie"));
  // 2. 指定配置项和数据
  var option = {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    // 注意颜色写的位置
    color: [
      "#006cff",
      "#60cda0",
      "#ed8884",
      "#ff9f7f",
      "#0096ff",
      "#9fe6b8",
      "#32c5e9",
      "#1d9dff"
    ],
    series: [
      {
        name: "点位统计",
        type: "pie",
        // 如果radius是百分比则必须加引号
        radius: ["10%", "70%"],
        center: ["50%", "50%"],
        roseType: "radius",
        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: "湖北" }
        ],
        // 修饰饼形图文字相关的样式 label对象
        label: {
          fontSize: 10
        },
        // 修饰引导线样式
        labelLine: {
          // 连接到图形的线长度
          length: 6,
          // 连接到文字的线长度
          length2: 8
        }
      }
    ]
  };

  // 3. 配置项和数据给我们的实例化对象
  myChart.setOption(option);
  // 4. 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function() {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });
})();

---

地图区域 (map)

图片展示：

代码展示：

地图的绘制是很复杂的，我们这边直接去官网引入就好。

---

用户统计 (users)

图片展示：

代码展示：

//用户模块
(function() {
    // 中间省略的数据  准备三项
    var item = {
        name: '',
        value: 1200,
        // 柱子颜色
        itemStyle: {
            color: '#254065'
        },
        // 鼠标经过柱子颜色
        emphasis: {
            itemStyle: {
                color: '#254065'
            }
        },
        // 工具提示隐藏
        tooltip: {
            extraCssText: 'opacity:0'
        },
    }

    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".bar"));
    // 2. 指定配置和数据
    option = {
        tooltip: {
            trigger: 'item'
                // axisPointer: {
                //   type: 'shadow'
                // }
        },
        color: new echarts.graphic.LinearGradient(
            // (x1,y2) 点到点 (x2,y2) 之间进行渐变
            0,
            0,
            0,
            1, [
                { offset: 0, color: '#00fffb' }, // 0 起始颜色
                { offset: 1, color: '#0061ce' } // 1 结束颜色
            ]
        ),
        grid: {
            left: '0%',
            right: '3%',
            bottom: '3%',
            top: '3%',
            containLabel: true,
            show: true,
            borderColor: 'rgba(0,240,255,0.3)'
        },
        xAxis: [{
            type: 'category',
            data: [
                '上海',
                '广州',
                '北京',
                '深圳',
                '合肥',
                '',
                '......',
                '',
                '杭州',
                '厦门',
                '济南',
                '成都',
                '重庆'
            ],
            axisTick: {
                alignWithLabel: false,
                show: false
            },
            axisLabel: {
                color: '#ac9bfd'
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(0, 240, 255, 0.3)'
                        // width:8,  x轴线的粗细
                        // opcity: 0,   如果不想显示x轴线 则改为 0
                }
            }
        }],
        yAxis: [{
            type: 'value',
            data: [
                0,
                500,
                1000,
                1500,
                2000,
                2500
            ],
            axisTick: {
                // 不显示刻度
                show: false
            },
            // y坐标轴文字标签样式设置
            axisLabel: {
                color: '#4c9bfd'
            },
            // y坐标轴颜色设置
            axisLine: {
                lineStyle: {
                    color: 'rgba(0, 240, 255, 0.3)',
                    // width:8,  x轴线的粗细
                    // opcity: 0,   如果不想显示x轴线 则改为 0
                },
                // y轴 分割线的样式 
                splitLine: {
                    lineStyle: {
                        color: 'rgba(0, 240, 255, 0.3)'
                    }
                }
            }
        }],
        series: [{
            name: '直接访问',
            type: 'bar',
            barWidth: '60%',
            data: [
                2100,
                1900,
                1700,
                1560,
                1400,
                item,
                item,
                item,
                900,
                750,
                600,
                480,
                240
            ],
        }]
    };
    // 3. 把配置给实例对象
    myChart.setOption(option);
    // 4. 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function() {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
    });
})();

---

总结

步骤：

1. 下载echarts
2. List item
3. 引入echarts
4. 初始化echarts实例对象
5. 指定配置项和数据(option)
6. 将配置项设置给echarts实例对象