前端学习篇 -- ECharts 学习

1、数据可视化

目的：借助于图像化手段，清晰有效地传达与沟通信息。

数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理

2、Echarts-介绍

常见的数据可视化库：

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

官网地址：https://www.echartsjs.com/zh/index.html

3、Echarts-使用步骤

引入echarts 插件文件到html页面中
准备一个具备大小的DOM容器

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

初始化echarts实例对象

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

指定配置项和数据(option)

let 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'
    }]
};

将配置项设置给echarts实例对象

myChart.setOption(option);

4、Echarts-配置说明

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

4.1 title：标题组件

设置图表标题（一般不使用）

let option = {
    title: {
        text: '折线图堆叠'
    },
}

属性值：

text: '文本内容'，
link: '文本超链接',
target: '超链接窗口打开方式'  
    blank - 新窗口
    self  - 当前窗口

4.2 tooltip：提示框组件（*）

鼠标放上去会有提示信息

let option = {
    title: {
        text: '折线图堆叠'
    },
     tooltip: {
        trigger: 'axis'
    },
}

属性值：

trigger: ''
    'item' 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
    'axis' 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
    'none' 什么都不触发

4.3 legend：图例组件

类似图表的锚点，点哪个对应的图表就会隐藏/出现

let option = {
     legend: {
     // series里面有了 name值则 legend里面的data可以删掉
        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
    },
    textStyle: {
        '设置图标样式'，
        color - 图标颜色
    },
    itemGap: '图标间隔',
    itemWidth: '图标宽',
    itemHeight:'图标高',
}

4.4 toolbox : 工具箱组件

可以另存为图片等功能（一般不使用）

let option = {
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
}

4.5 grid：直角坐标系内绘图网格（*）

控制图表的大小

let option = {
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
}

属性值：

left：'距离容器的左侧距离',
right：'距离容器的右侧距离',
top：'距离容器的上侧距离',
left：'距离容器的下侧距离',
containLabel: '以什么位置距离盒子'
    true - 以文字距离
    false- 以刻度尺距离

4.6 xAxis 和 yAxis 坐标轴（*）

设置图表的水平轴跟垂直轴

xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
    type: 'value'
},

属性值：

show: '是否显示坐标轴',
    true / false
inverse: '是否反向坐标轴',
    true(正向) / false (反向)
axisTick: '坐标轴刻度相关设置',
    show: '是否显示',
type:  '坐标轴类型',
    'value' 数值轴，适用于 yAxis
    'category' 类目轴,适用于 xAxis
    'time' 时间轴,适用于连续的时序数据
    'log' 对数轴。适用于对数数据
boundaryGap: '设置图表是否紧贴坐标轴',
    true - 是
    false- 否
data: ['数据1'，'数据2'...],
axisLabel: {
    '坐标轴刻度文字相关设置'
    color: '文字颜色',
    fontSize: '文字大小'
    ...
},
axisLine: {
    '坐标轴线条设置'
    show: '是否显示',
        true / false
    lineStyle: {
       //设置单独的线条样式
       // color: "rgba(255,255,255,.1)", 线条颜色
       // width: 1,                      线条宽度
       // type: "solid"                  线条类型
    }
},
splitLine: {
    '分割线样式'
    lineStyle: {
       //设置单独的线条样式
       // color: "rgba(255,255,255,.1)", 线条颜色
       // width: 1,                      线条宽度
       // type: "solid"                  线条类型
    }
}

4.7 series : 系列图表配置（**）

它决定着显示那种类型的图表

 series: [
    {
        name: '邮件营销',
        type: 'line',
        stack: '总量',
        data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
        name: '联盟广告',
        type: 'line',
        stack: '总量',
        data: [220, 182, 191, 234, 290, 330, 310]
    },

    {
        name: '搜索引擎',
        type: 'line',
        stack: '总量',
        data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
]

属性值：

name: '设置图表的锚点名称', //设置后就不用 legend 组件了
type: '图表类型',
    'line' - 折线图
    'bar'  - 柱状图
    'pie'  - 饼图
    ...
stack: '堆叠', //如果设置了相同的值，那么data数据里则是追加（一般不设置）
data: [] //设置图表数据,
barWidth: '设置线条的宽度',
lineStyle: {
    '当前线条样式相关设置',
},
itemStyle: {
    '设置线条焦点图形样式',
},
areaStyle: {
    '填充区域设置'
},
symbol: '设置线条焦点图形'，
    'circle' - 小圆点
    ‘rect’   - 小方块
    ...
symbolSize: '设置线条焦点图形大小',
radius: '设置饼形图大小', 
    [40%,60%]  //内圆半径和外圆半径
center: '设置饼形图位置',
    [40%,60%]  //水平位置和垂直位置
barCategoryGap: '线条之间的距离',
lable: {
    '线条内文本标签设置',
    show: '是否显示',
        true / false
    position: '显示位置',
        inside //在线条内
        ...
    formatter: '设置显示文字内容'
        {a} //name里的名字
        {b} //数据名，坐标轴里的data值
        {c} //data里数据值
},
lableLine: {
    '图形与文字间引导线设置',
    length: '第一条引导线',
    length2: '第二条引导线'
}
yAxisIndex: '设置y轴的层叠性', //如果y轴有两条或以上数据，就是设置重叠
xAxisIndex: '设置x轴的层叠性'

4.8 color：线条颜色（*）

设置线条颜色

color: ['颜色1','颜色2'...]

5、图表自适应屏幕

window.addEventListener("resize", function() {
  myChart.resize();
});

6、中国地图配置

6.1 引入 china.js 文件

6.2 社区找相关图表

6.3 样式

在 geo 对象里修改

geo: {
    map: 'china',
      //地图放大 1.2 倍
      zoom: 1.2,
      label: {
        emphasis: {
          show: false
        }
      },
      roam: false,
      itemStyle: {
        normal: {
          //省份颜色
          areaColor: '#142957',
          borderColor: '#0692a4'
        },
        emphasis: {
          areaColor: '#0b1c2d'
        }
      }
}

前端学习篇 -- ECharts 学习

1、数据可视化

2、Echarts-介绍

3、Echarts-使用步骤

4、Echarts-配置说明

4.1 title：标题组件

4.2 tooltip：提示框组件（*）

4.3 legend：图例组件

4.4 toolbox : 工具箱组件

4.5 grid：直角坐标系内绘图网格（*）

4.6 xAxis 和 yAxis 坐标轴（*）

4.7 series : 系列图表配置（**）

4.8 color：线条颜色（*）

5、图表自适应屏幕

6、中国地图配置

6.1 引入 china.js 文件

6.2 社区找相关图表

6.3 样式

猜你喜欢