ECharts数据可视化

ECharts数据可视化

1. Echarts-介绍

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

图形实例：https://echarts.apache.org/examples/zh/index.html

官方教程：五分钟上手ECharts

• 1. 下载，选择从 GitHub 下载编译产物
     -echarts
• 2. 引入echarts dist/echarts.min.js
• 3. 准备一个具备大小的DOM容器（用于放图表）

<div id="main" style="width: 600px;height:400px;"></div>

• 4. 初始化echarts实例对象（也可以使用类名），下面的var都可以改为let，不过官网是var

var myChart = echarts.init(document.getElementById('main'));

• 5. 指定配置项和数据(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'
    }]
};

• 6. 将配置项设置给echarts实例对象

myChart.setOption(option);

2. Echarts-基础配置

需要了解的主要配置：series xAxis yAxis grid tooltip title legend color
参考：配置项手册

• series
  • 系列列表。每个系列通过 type 决定自己的图表类型
  • 大白话：图标数据，指定什么类型的图标，可以多个图表重叠。
  • stack数据堆叠，同个类目轴上系列配置相同的stack值后（自定义）， 后一个系列的值会在前一个系列的值上相加。通常场景下不写代表不叠加即可
• xAxis：直角坐标系 grid 中的 x 轴
  • boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
• yAxis：直角坐标系 grid 中的 y 轴
• grid：直角坐标系内绘图网格。（不是放图表的盒子大小）
• title：标题组件
• tooltip：提示框组件
• legend：图例组件
• color：调色盘颜色列表，多个样例赋值使用数组包含
• toolbox：工具栏组件，如可以进行图片下载选项

如下代码：

var option = {
            color: ['pink', 'blue', 'green', 'skyblue', 'red'],
            title: {
                text: '我的折线图'
            },
            tooltip: {
                trigger: 'axis'//当鼠标经过坐标时候下显示提示框
            },
            legend: {
                data: ['直播营销', '联盟广告', '视频广告', '直接访问']
            },
            grid: {
            //值越大，图形向里面缩的越多
                left: '3%',
                right: '3%',
                bottom: '3%',
                // 当刻度标签溢出的时候，grid 区域是否包含坐标轴的刻度标签。如果为true，则显示刻度标签
                // 如果left right等设置为 0% 刻度标签就溢出了，此时决定是否显示刻度标签
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                // 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
                boundaryGap: false,
                data: ['星期一', '星期二', '周三', '周四', '周五', '周六', '周日']
            },
            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]
                }
            ]
        };

3. REM适配-图表等比例缩放

• 设计稿是1920px
• PC端适配： 宽度在 1024~1920之间页面元素宽高自适应
  1. flexible.js 把屏幕分为 24 等份
  2. css rem 插件的基准值是 80px
     插件-配置按钮—配置扩展设置–Root Font Size 里面 设置。
     但是别忘记重启vscode软件保证生效
  3. 要把屏幕宽度约束在1024~1920之间有适配，实现代码：

// 实现rem适配
@media screen and (max-width: 1024px) {
     html {
         font-size: 42.66px !important;
     }
 }

 @media screen and (min-width: 1920px) {
     html {
         font-size: 80px !important;
     }
 }

实现图表的等比例缩放：myChart是获取的图表对象：

   window.addEventListener('resize', function () {
        myChart.resize()
    })
    myChart.setOption(option);

4. 边框图片

盒子大小不一样，且盒子边框具有特殊的样式，可以使用边框图片来完成

如下所述的图片：

• 切分是按照上右下左的顺序进行的切分，切四刀，切成九宫格的形式。

css3中自适应边框图片运用，常用属性如下：
注意border-image-width属性默认的是 border的宽度 但是和border有区别，这个是边框图片的宽度，不会挤压文字

• 举例如下述的图片切割：
  

• 组合写法：

     <div class="pannel">
         <div class="innner">

         </div>
      </div>

border-image: url("images/border.jpg") 167/20px round;

 拆分写法：通常直接给border加宽度，就不用给背景图片加宽度了

.pannel{
  border:15px solid transparent;
  border-width: 51px 38px 20px 132px;
  border-image-source:url(../images/border.png);
  border-image-slice:51 38 20 132;
}

问题:此时的中间内容区域只有上述图片中心的那个大小，因此我们需要扩充内部区域，使用子绝父相，但是绝对定位也盖不住，因此，使用拉伸至盒子的大小即可，代码如下

.pannel .inner{
  position: absolute;
  left: -132px;
  right:-38px ;
  top: -51px;
  bottom: -20px;
}

解释：

• 边框图片资源地址
• 裁剪尺寸（上 右 下 左）单位默认px，可使用百分百。
• 边框图片的宽度，默认边框的宽度。
• 平铺方式：
  • stretch 拉伸（默认）
  • repeat 平铺，从边框的中心向两侧开始平铺，会出现不完整的图片。
  • round 环绕，是完整的使用切割后的图片进行平铺。

对于饼状图可以修改series属性下的radius改变圆的半径，进而改变图标的大小，如果里面是百分比，则半径是大盒子长度的百分比，写百分比的时候需要加引号,找文档先在series下面找到你要用的图形，然后再依次进行查找

5. ECharts社区访问方式

ECharts社区提供了众多用户自己设计提供的炫酷案例，是活跃的echart使用者交流和贡献定制好的图表的地方，在这里可以找到一些基于echart的高度定制好的图表，相当于基于jquery开发的插件，这里是基于echarts开发的第三方的图表。

• 目前Echarts官方社区已经停止维护，下面存在开源实例的类似社区网站,推荐第三个网站：
  - 第一个：www.isqqw.com/#/homepage，多个分类， 可在线调试和切换版本。
  - 第二个：http://www.ppchart.com 多个分类，可在线调试。
  - 第三个： www.makeapie.cn/echarts类似原版社区的网站
• 注意点再引入地图组件的时候，需要先把地图的js文件导入才能使用。地图插件js文件直接在网上搜，（我想上传，但是一直提示资源已经存在，栓q，或者有需要评论私信我）

6. 部分特殊的样式汇总

6.1 图标颜色的渐变

如果要给某一特定的数据设置渐变，再对应的data数据下书写：itemStyle属性

 color: new echarts.graphic.LinearGradient(
      // (x1,y2) 点到点 (x2,y2) 之间进行渐变
      0,
      0,
      0,
      1,
      [
        { offset: 0, color: "#00fffb" }, // 0 起始颜色
        { offset: 1, color: "#0061ce" } // 1 结束颜色
      ]
    ),

6.2 更改图表的大小

 - 饼形图修改图表大小是通过  series 对象里面的 radius 
 - 柱形图修改图标大小是通过  series 对象里面的 grid 对象  left  right 等

6.3 柱状图常用汇总

6.4 雷达图常用汇总

6.5 饼图特殊属性

起始角度，支持范围[0, 360]，startAngle，可以用于旋转饼图，但是其是指的是开始的角度，不是旋转的角度，对于每个方位对应的起始角度如下所示：