01Echarts的基本使用

ECharts的快速上手

ECharts 的入门使用特别简单, 5分钟就能够上手. 他大体分为这几个步骤

步骤1：引入 echarts.js 文件
echarts是一个 js 的库，当然得先引入这个库文件

<script src="js/echarts.min.js"></script>

步骤2：准备一个呈现图表的盒子
这个盒子通常来说就是我们熟悉的 div ，这个 div 决定了图表显示在哪里

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

步骤3：初始化 echarts 实例对象
在这个步骤中, 需要指明图表最终显示在哪里的DOM元素

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

步骤4：准备配置项
这步很关键，我们最终的效果，到底是显示饼图还是折线图，基本上都是由配置项决定的

var option = {
  xAxis: {
    type: 'category',
    data: ['小明', '小红', '小王']
 },
  yAxis: {
    type: 'value'
 },
  series: [
   {
      name: '语文',
      type: 'bar',
      data: [70, 92, 87],
   }
 ]
}

步骤5：将配置项设置给 echarts 实例对象

myChart.setOption(option)

通过简单的5个步骤, 就能够把一个简单的柱状图给显示在网页中了.这几个步骤中, 步骤4最重要,
一个图表最终呈现什么样子,完全取决于这个配置项.所以对于不同的图表, 除了配置项会发生改变之外,
其他的代码都是固定不变的.

通用配置

使用 ECharts 绘制出来的图表, 都天生就自带一些功能, 这些功能是每一个图表都具备的, 我们可以通过
配置, 对这些功能进行设置.
1.标题: title

var option = {
  title: {
    text: "成绩",  // 标题文字
    textStyle: {
      color: 'red' // 文字颜色
   },
    borderWidth: 5,  // 标题边框
    borderColor: 'green', // 标题边框颜色
    borderRadius: 5,  // 标题边框圆角
    left: 20, // 标题的位置
    top: 20 // 标题的位置
 }
}

image.png

2提示框: tooltip
tooltip 指的是当鼠标移入到图表或者点击图表时, 展示出的提示框
触发类型: trigger

可选值有item\axis

触发时机: triggerOn

可选值有 mouseOver\click

格式化显示: formatter
字符串模板

var option = {
  tooltip: {
    trigger: 'item',
    triggerOn: 'click',
    formatter: '{b}:{c}'
 }
}
// 这个{b} 和 {c} 所代表的含义不需要去记, 在官方文档中有详细的描述

image.png

回调函数

var option = {
  tooltip: {
    trigger: 'item',
    triggerOn: 'click',
    formatter: function (arg) {
      return arg.name + ':' + arg.data
   }
 }
}

image.png

3.工具按钮: toolbox
toolbox 是 ECharts 提供的工具栏, 内置有导出图片，数据视图, 重置, 数据区域缩放, 动态类型切
换五个工具
工具栏的按钮是配置在 feature 的节点之下

var option = {
  toolbox: {
    feature: {
      saveAsImage: {}, // 将图表保存为图片
      dataView: {}, // 是否显示出原始数据
      restore: {}, // 还原图表
      dataZoom: {}, // 数据缩放
      magicType: { // 将图表在不同类型之间切换,图表的转换需要数据的支持
        type: ['bar', 'line']
     }
   }
 }
}

image.png

5.图例: legend
legend 是图例,用于筛选类别,需要和 series 配合使用
legend 中的 data 是一个数组
legend 中的 data 的值需要和 series 数组中某组数据的 name 值一致

var option = {
  legend: {
    data: ['语文', '数学']
 },
  xAxis: {
    type: 'category',
    data: ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
 },
  yAxis: {
    type: 'value'
 },
  series: [
   {
      name: '语文',
      type: 'bar',
      data: [88, 92, 63, 77, 94, 80, 72, 86]
   }, {

      name: '数学',
      type: 'bar',
      data: [93, 60, 61, 82, 95, 70, 71, 86]
   }
 ]
}

image.png

折线图的实现步骤

1 ECharts 最基本的代码结构

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="js/echarts.min.js"></script>
</head>
<body>
  <div style="width: 600px;height:400px"></div>
<script>
 var mCharts = echarts.init(document.querySelector("div"))
 var option = {}
 mCharts.setOption(option)
</script>
</body>
</html>

此时 option 是一个空空如也的对象

2 准备 x 轴的数据

var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月',
'10月', '11月', '12月']

3 准备 y 轴的数据

var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800,
600]

4 准备 option , 将 series 中的 type 的值设置为: line

var option = {
  xAxis: {
    type: 'category',
    data: xDataArr
 },
  yAxis: {
    type: 'value'
 },
  series: [
   {
      type: 'line',
      data: yDataArr
   }
 ]
}

image.png

折线图的常见效果

最大值\最小值

var option = {
  series: [
   {
    
        data: [
         {
            type: 'max',
            name: '最大值'
         }, {
            type: 'min',
            name: '最小值'
         }
       ]
     }
   }

image.png

平均值 markLine

var option = {
  series: [
   {
      ......
      markLine: {
        data: [
         {
            type: 'average',
            name: '平均值'
         }
       ]
     }
   }
 ]
}

image.png

标注区间 markArea

var option = {
  series: [
   {
      ......
markArea: {
       data: [
       [
        {
          xAxis: '1月'
        }, {
          xAxis: '2月'
        }
       ],
       [
        {
          xAxis: '7月'
        }, {
          xAxis: '8月'
        }
       ]
      ]
     }
   }
 ]
}

image.png

线条控制

1.平滑线条 smooth

var option = {
  series: [
   {
      ......
smooth: true
   }
 ]
}

image.png

线条样式 lineStyle

var option = {
  series: [
   {
      ......
      smooth: true,
      lineStyle: {
        color: 'green',
        type: 'dashed' // 可选值还有 dotted  solid
     }
   }
 ]
}

image.png

填充风格 areaStyle

var option = {
  series: [
   {
      type: 'line',
      data: yDataArr,
      areaStyle: {
        color: 'pink'
     }
   }
 ]
}

image.png

紧挨边缘 boundaryGap
boundaryGap 是设置给 x 轴的, 让起点从 x 轴的0坐标开始

var option = {
  xAxis: {
    type: 'category',
    data: xDataArr,
    boundaryGap: false
 }
}

image.png

缩放, 脱离0值比例
如果每一组数据之间相差较少, 且都比0大很多, 那么有可能会出现这种情况

var yDataArr = [3005, 3003, 3001, 3002, 3009, 3007, 3003, 3001, 3005,
3004, 3001, 3009]  // 此时y轴的数据都在3000附近, 每个数之间相差不多

image.png

这显然不是我们想要的效果, 因此可以配置上 scale , 让其摆脱0值比例
scale 配置
scale 应该配置给 y 轴

var option = {
  yAxis: {
    type: 'value',
    scale: true
 }
}

image.png

堆叠图

堆叠图指的是, 同个类目轴上系列配置相同的 stack 值后，后一个系列的值会在前一个系列的值上相加
如果在一个图表中有两个或者多个折线图, 在没有使用堆叠配置的时候, 效果如下:

<script>
 var mCharts = echarts.init(document.querySelector("div"))
 var xDataArr = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
 var yDataArr1 = [120, 132, 101, 134, 90, 230, 210]
 var yDataArr2 = [20, 82, 191, 94, 290, 330, 310]
 var option = {
  xAxis: {
   type: 'category',
   data: xDataArr
 },
  yAxis: {
   type: 'value',
   scale: true
 },
  series: [
  {
    type: 'line',
    data: yDataArr1
  },
  {
    type: 'line',
    data: yDataArr2
  }
 ]
}
 mCharts.setOption(option)
</script>

image.png

使用了堆叠图之后:

var option = {
  series: [
   {
      type: 'line',
      data: yDataArr1,
      stack: 'all'  // series中的每一个对象配置相同的stack值, 这个all可以任意写
   },
   {
      type: 'line',
      data: yDataArr2,
      stack: 'all' // series中的每一个对象配置相同的stack值, 这个all可以任意写
   }
 ]
}

image.png

蓝色这条线的y轴起点, 不再是y轴, 而是红色这条线对应的点. 所以相当于蓝色是在红色这条线的基
础之上进行绘制. 基于前一个图表进行堆叠

散点图的实现步骤

1 ECharts 最基本的代码结构

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="js/echarts.min.js"></script>
</head>
<body>
  <div style="width: 600px;height:400px"></div>
<script>
 var mCharts = echarts.init(document.querySelector("div"))
 var option = {}
 mCharts.setOption(option)
</script>
</body>
</html>

2 准备 x 轴和 y 轴的数据

var data = [{ "gender": "female", "height": 161.2, "weight": 51.6 }, {
"gender": "female", "height": 167.5, "weight": 59 }, { "gender": "female",
"height": 159.5, "weight": 49.2 }, { "gender": "female", "height": 157,
"weight": 63 }, { "gender": "female", "height": 155.8, "weight": 53.6 }, {
"gender": "female", "height": 170, "weight": 59 }, { "gender": "female",
"height": 159.1, "weight": 47.6 }, { "gender": "female", "height": 166,
"weight": 69.8 }, { "gender": "female", "height": 176.2, "weight": 66.8 }, {
"gender": "female", "height": 160.2, "weight": 75.2 }, { "gender": "female",
"height": 172.5, "weight": 55.2 }, { "gender": "female", "height": 170.9,
"weight": 54.2 }, { "gender": "female", "height": 172.9, "weight": 62.5 }, {
"gender": "female", "height": 153.4, "weight": 42 }, { "gender": "female",
"height": 160, "weight": 50 }, { "gender": "female", "height": 147.2,
"weight": 49.8 },...此处省略...]

假设这个数据是从服务器获取到的, 数组中的每一个元素都包含3个维度的数据: 性别,身高,体重, 而
散点图需要的数据是一个二维数组, 所以我们需要将从服务器获取到的这部分数据,通过代码生成散
点图需要的数据

var axisData = []
for (var i = 0; i < data.length; i++) {
  var height = data[i].height
  var weight = data[i].weight
  var itemArr = [height, weight]
  axisData.push(itemArr)
}

axisData 就是一个二维数组, 数组中的每一个元素还是一个数组, 最内层数组中有两个元素, 一个
代表身高, 一个代表体重

3 准备配置项
xAxis 和 yAxis 的 type 都要设置为 value
在 series 下设置 type:scatter

var option = {
  xAxis: {
    type: 'value'
 },
  yAxis: {
    type: 'value'
 },
  series: [
   {
      type: 'scatter',
      data: axisData
   }
 ]
}

4 调整配置项, 脱离0值比例
给 xAxis 和 yAxis 配置 scale 的值为 true

var option = {
  xAxis: {
    type: 'value',
    scale: true
 },
  yAxis: {
    type: 'value',
    scale: true
 },
  series: [
   {
      type: 'scatter',
      data: axisData,
   }
 ]
}

image.png

散点图的常见效果

气泡图效果
要能够达到气泡图的效果, 其实就是让每一个散点的大小不同, 让每一个散点的颜色不同
symbolSize控制散点的大小
itemStyle.color 控制散点的颜色
这两个配置项都支持固定值的写法, 也支持回调函数的写法
固定值的写法如下:

var option = {
  series: [
   {
      type: 'scatter',
      data: axisData,
      symbolSize: 25,
      itemStyle: {
        color: 'green',
     }
   }
 ]
}

image.png

回调函数的写法如下:

var option = {
  series: [
   {
      type: 'scatter',
      data: axisData,
      symbolSize: function (arg) {
        var weight = arg[1]
        var height = arg[0] / 100
        // BMI > 28 则代表肥胖, 肥胖的人用大的散点标识, 正常的人用小散点标识
        // BMI: 体重/ 身高*身高   kg m
        var bmi = weight / (height * height)
        if (bmi > 28) {
          return 20
       }
        return 5
     },
      itemStyle: {
        color: function (arg) {
          var weight = arg.data[1]
          var height = arg.data[0] / 100
          var bmi = weight / (height * height)
          if (bmi > 28) {
            return 'red'
         }
          return 'green'
       }
     }
   }
 ]
}

image.png

涟漪动画效果
type:effectScatter
将 type 的值从 scatter 设置为 effectScatter 就能够产生涟漪动画的效果
rippleEffect
rippleEffect 可以配置涟漪动画的大小

var option = {
  series: [
   {
      type: 'effectScatter',
      rippleEffect:{
        scale:3
     }
   }
 ]
}

image.png

showEffectOn
showEffectOn 可以控制涟漪动画在什么时候产生, 它的可选值有两个: render 和 emphasis
render 代表界面渲染完成就开始涟漪动画
emphasis 代表鼠标移过某个散点的时候, 该散点开始涟漪动画

var option = {
  series: [
   {
      type: 'effectScatter',
      showEffectOn: 'emphasis',
      rippleEffect:{
        scale:3
     }
   }
 ]
}

var option = {
series: [
{
type: 'effectScatter',
showEffectOn: 'emphasis',
rippleEffect:{
scale:3
}
}
]
}

结合地图
散点图也经常结合地图来进行地图区域的标注, 这个效果将在讲解地图时实现

散点图的特点
散点图可以帮助我们推断出不同维度数据之间的相关性, 比如上述例子中,看得出身高和体重是正相关, 身
高越高, 体重越重
散点图也经常用在地图的标注上

直角坐标系的常见配置

直角坐标系的图表指的是带有x轴和y轴的图表, 常见的直角坐标系的图表有: 柱状图折线图散点图
针对于直角坐标系的图表, 有一些通用的配置

配置1: 网格 grid
grid是用来控制直角坐标系的布局和大小, x轴和y轴就是在grid的基础上进行绘制的
显示 grid
show: true
grid 的边框
borderWidth : 10
grid 的位置和大小
left top right bottom
width height

var option = {
  grid: {
    show: true, // 显示grid
    borderWidth: 10, // grid的边框宽度
    borderColor: 'red', // grid的边框颜色
    left: 100, // grid的位置
    top: 100,
    width: 300, // grid的大小
    height: 150
 }
}

配置2: 坐标轴 axis
坐标轴分为x轴和y轴, 一个 grid 中最多有两种位置的 x 轴和 y 轴
坐标轴类型 type
value : 数值轴, 自动会从目标数据中读取数据
category : 类目轴, 该类型必须通过 data 设置类目数据
坐标轴位置
xAxis : 可取值为 top 或者 bottom
yAxis : 可取值为 left 或者 right

var option = {
  xAxis: {
    type: 'category',
    data: xDataArr,
    position: 'top'
 },
  yAxis: {
    type: 'value',
    position: 'right'
 }
}

配置3: 区域缩放 dataZoom
dataZoom 用于区域缩放, 对数据范围过滤, x轴和y轴都可以拥有, dataZoom 是一个数组, 意味着
可以配置多个区域缩放器
区域缩放类型 type
slider : 滑块
inside : 内置, 依靠鼠标滚轮或者双指缩放
产生作用的轴
xAxisIndex :设置缩放组件控制的是哪个 x 轴, 一般写0即可
yAxisIndex :设置缩放组件控制的是哪个 y 轴, 一般写0即可
指明初始状态的缩放情况
start : 数据窗口范围的起始百分比
end : 数据窗口范围的结束百分比

var option = {
  xAxis: {
    type: 'category',
    data: xDataArr
 },
  yAxis: {
    type: 'value'
 },
  dataZoom: [
   {
      type: 'slider',
      xAxisIndex: 0
   },
   {
      type: 'slider',
      yAxisIndex: 0,
      start: 0,
      end: 80
   }
 ]
}

image.png

需要注意的是, 针对于非直角坐标系图表, 比如饼图 地图 等, 以上三个配置可能就不会生效了

饼图的实现步骤

1 ECharts 最基本的代码结构

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="js/echarts.min.js"></script>
</head>
<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"))
    var option = {}
    mCharts.setOption(option)
  </script>
</body>
</html>

2 准备数据

var pieData = [
 {
    value: 11231,
    name: "淘宝",
 },
 {
    value: 22673,
    name: "京东"
 },
 {
    value: 6123,
    name: "唯品会"
 },
 {
    value: 8989,
    name: "1号店"
 },
 {
    value: 6700,
    name: "聚美优品"
 }
]

3 准备配置项在 series 下设置 type:pie

var option = {
  series: [
   {
      type: 'pie',
      data: pieData
   }
 ]
}

image.png

注意:
饼图的数据是由 name 和 value 组成的字典所形成的数组
饼图无须配置 xAxis 和 yAxis

饼图的常见效果

显示数值
label.show : 显示文字
label.formatter : 格式化文字

var option = {
  series: [
  {
    type: 'pie',
    data: pieData,
    label: {
     show: true,
     formatter: function (arg) {
      return arg.data.name + '平台' + arg.data.value + '元\n' +
arg.percent + '%'
    }
   }
  }
 ]

南丁格尔图
南丁格尔图指的是每一个扇形的半径随着数据的大小而不同, 数值占比越大, 扇形的半径也就越大
roseType:'radius'

 var option = {
  series: [
{
    type: 'pie',
    data: pieData,
    label: {
     show: true,
     formatter: function (arg) {
      return arg.data.name + '平台' + arg.data.value + '元\n' +
arg.percent + '%'
    }
   },
    roseType: 'radius'
  }
 ]
}

image.png

选中效果
selectedMode: 'multiple'
选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可
选 'single' ， 'multiple' ，分别表示单选还是多选
selectedOffset: 30
选中扇区的偏移距离

var option = {
  series: [
  {
    type: 'pie',
    data: pieData,
    selectedMode: 'multiple', //
    selectedOffset: 30
  }
 ]
}

image.png

圆环
radius
饼图的半径。可以为如下类型：
number ：直接指定外半径值。 string ：例如， '20%' ，表示外半径为可视区尺寸（容器高宽中
较小一项）的 20% 长度。 Array. ：数组的第一项是内半径，第二项是外半径, 通过 Array , 可以
将饼图设置为圆环图

var option = {
  series: [
   {
      type: 'pie',
      data: pieData,
      radius: ['50%', '70%']
   }
 ]
}

image.png

地图

-地图图表的使用方式
百度地图API : 使用百度地图的 api , 它能够在线联网展示地图, 百度地图需要申请 ak
矢量地图 : 可以离线展示地图, 需要开发者准备矢量地图数据
接下来的实现是通过矢量图的方式来实现的

矢量地图的实现步骤

1 ECharts 最基本的代码结构

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="js/echarts.min.js"></script>
</head>
<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"))
    var option = {}
    mCharts.setOption(option)
  </script>
</body>
</html>

2 准备中国的矢量 json 文件, 放到 json/map/ 目录之下

image.png
3 使用 Ajax 获取 china.json

$.get('json/map/china.json', function (chinaJson) {
})

4 在Ajax的回调函数中, 往 echarts 全局对象注册地图的 json 数据
echarts.registerMap('chinaMap', chinaJson)

$.get('json/map/china.json', function (chinaJson) {
 echarts.registerMap('chinaMap', chinaJson)
})

5 获取完数据之后, 需要配置 geo 节点, 再次的 setOption
type : 'map'
map : 'chinaMap'

var mCharts = echarts.init(document.querySelector("div"))
$.get('json/map/china.json', function (chinaJson) {
  echarts.registerMap('chinaMap', chinaJson)
  var option = {
    geo: {
      type: 'map',// map是一个固定的值
      map: 'chinaMap',//chinaMap需要和registerMap中的第一个参数保持一致
   }
 };
  mCharts.setOption(option)
})

image.png

注意: 需要注意的是, 由于在代码中使用了 Ajax , 所以, 关于此文件的打开, 不能以 file 的协议打开, 应
该将其置于 HTTP 的服务之下方可正常展示地图

地图的常见配置

缩放拖动: roam

var option = {
  geo: {
    type: 'map',// map是一个固定的值
    map: 'chinaMap',//chinaMap需要和registerMap中的第一个参数保持一致,
    roam: true, // 运行使用鼠标进行拖动和缩放
 }
}

名称显示: label

var option = {
  geo: {
    type: 'map',// map是一个固定的值
    map: 'chinaMap',//chinaMap需要和registerMap中的第一个参数保持一致,
    roam: true,
    label: {
      show: true
   }
 }
}

image.png

初始缩放比例: zoom
地图中心点: center

var option = {
  geo: {
    type: 'map',// map是一个固定的值
    map: 'chinaMap',//chinaMap需要和registerMap中的第一个参数保持一致,
    roam: true,
    label: {
      show: true
   },
    zoom: 0.8, // 地图的缩放比例, 大于1代表放大, 小于1代表缩小
    center: [87.617733, 43.792818] // 当前视角的中心点，用经纬度表示
 }
}

image.png

地图的常见效果

显示某个区域
准备安徽省的矢量地图数据

image.png
加载安徽省地图的矢量数据

$.get('json/map/anhui.json', function (anhuiJson) {
})

在Ajax的回调函数中注册地图矢量数据
echarts.registerMap('anhui', anhuiJson)
配置 geo 的 type:'map' , map:'anhui'
通过 zoom 调整缩放比例
通过 center 调整中心点

<script>
  var mCharts = echarts.init(document.querySelector("div"))
  $.get('json/map/anhui.json', function (anhuiJson) {
    console.log(anhuiJson)
    echarts.registerMap('anhui', anhuiJson)
    var option = {
      geo: {
type: 'map',
        map: 'anhui',
        label: {
          show: true
       },
        zoom: 1.2,
        center: [116.507676, 31.752889]
     }
   };
    mCharts.setOption(option)
 })
</script>

image.png

不同城市颜色不同

1.显示基本的中国地图

<body>
  <div style="width: 600px;height:400px;border:1px solid red"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"))
    $.get('json/map/china.json', function (chinaJson) {
      echarts.registerMap('chinaMap', chinaJson)
      var option = {
        geo: {
          type: 'map',
          map: 'chinaMap',
          roam: true,
          label: {
            show: true
         }
       }
     }
      mCharts.setOption(option)
   })
  </script>
</body>
</html>

2.准备好城市空气质量的数据, 并且将数据设置给 series

var airData = [{ name: '北京', value: 39.92 },{ name: '天津', value:
39.13 },{ name: '上海', value: 31.22 },{ name: '重庆', value: 66 },{
name: '河北', value: 147 },{ name: '河南', value: 113 },{ name: '云南',
value: 25.04 },{ name: '辽宁', value: 50 },{ name: '黑龙江', value: 114
},{ name: '湖南', value: 175 },{ name: '安徽', value: 117 },{ name: '山
东', value: 92 },{ name: '新疆', value: 84 },{ name: '江苏', value: 67 },
{ name: '浙江', value: 84 },{ name: '江西', value: 96 },{ name: '湖北',
value: 273 },{ name: '广西', value: 59 },{ name: '甘肃', value: 99 },{
name: '山西', value: 39 },{ name: '内蒙古', value: 58 },{ name: '陕西',
value: 61 },{ name: '吉林', value: 51 },{ name: '福建', value: 29 },{
name: '贵州', value: 71 },{ name: '广东', value: 38 },{ name: '青海',
value: 57 },{ name: '西藏', value: 24 },{ name: '四川', value: 58 },{
name: '宁夏', value: 52 },{ name: '海南', value: 54 },{ name: '台湾',
value: 88 },{ name: '香港', value: 66 },{ name: '澳门', value: 77 },{
name: '南海诸岛', value: 55 }]
......
var option = {
  ......
  series: [
   {
      data: airData
   }
 ]
}

3.将 series 下的数据和 geo 关联起来
geoIndex: 0
type: 'map'

var option = {
  series: [
   {
      data: airData,
      geoIndex: 0,
      type: 'map'
   }
 ]
}

4.结合 visualMap 配合使用
visualMap 是视觉映射组件, 和之前区域缩放 dataZoom 很类似, 可以做数据的过滤. 只不过
dataZoom 主要使用在直角坐标系的图表, 而 visualMap 主要使用在地图或者饼图中

var option = {
  geo: {
    type: 'map',
    map: 'chinaMap',
    roam: true,
    label: {
      show: true
   }
 },
series: [
   {
      data: airData,
      geoIndex: 0,
      type: 'map'
   }
 ],
  visualMap: {
    min: 0, // 最小值
    max: 300, // 最大值
    inRange: {
      color: ['white', 'red'] // 颜色的范围
   },
    calculable: true // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
 }
}

地图和散点图结合

1.给 series 这个数组下增加新的对象
2.准备好散点数据,设置给新对象的 data

var scatterData = [
 {
    value: [117.283042, 31.86119] // 散点的坐标, 使用的是经纬度
 }
]

3.配置新对象的 type

type:effectScatter

让散点图使用地图坐标系统

coordinateSystem: 'geo'

让涟漪的效果更加明显

rippleEffect: {  scale: 10 }

var option = {
  series: [
   {
      data: airData,
      geoIndex: 0,
      type: 'map'
   }, {
      data: scatterData,
      type: 'effectScatter',
      coordinateSystem: 'geo',
      rippleEffect: {
        scale: 10
     }
   }
 ]
}

image.png

雷达图

1 ECharts 最基本的代码结构

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="js/echarts.min.js"></script>
</head>
<body>
  <div style="width: 600px;height:400px"></div>
<script>
    var mCharts = echarts.init(document.querySelector("div"))
    var option = {}
    mCharts.setOption(option)
  </script>
</body>
</html>

2 定义各个维度的最大值

var dataMax = [
 {
    name: '易用性', max: 100
 },
 {
    name: '功能', max: 100
 },
 {
    name: '拍照', max: 100
 },
 {
    name: '跑分', max: 100
 },
 {
    name: '续航', max: 100
 }
]

3 准备具体产品的数据

var hwScore = [80, 90, 80, 82, 90]
var zxScore = [70, 82, 75, 70, 78]

4 在 series 下设置 type:radar

var option = {
  radar: {
    indicator: dataMax
 },
  series: [
   {
      type: 'radar',
      data: [
       {
          name: '华为手机1',
          value: hwScore
       },
       {
          name: '中兴手机1',
          value: zxScore
       }
     ]
   }
 ]
}

image.png

雷达图的常见效果

显示数值 label

var option = {
  series: [
   {
      type: 'radar',
      label: {
        show: true
     },
      data: [
       {
          name: '华为手机1',
          value: hwScore
       },
       {
          name: '中兴手机1',
          value: zxScore
       }
     ]
   }
 ]
}

image.png

区域面积 areaStyle

var option = {
  series: [
   {
      type: 'radar',
      label: {
        show: true
     },
      areaStyle: {},
      data: [
       {
          name: '华为手机1',
          value: hwScore
       },
       {
          name: '中兴手机1',
          value: zxScore
       }
     ]
   }
 ]
}

image.png

绘制类型 shape
雷达图绘制类型，支持 'polygon' 和 'circle'
'polygon' : 多边形
'circle' 圆形

 var option = {
  radar: {
   indicator: dataMax,
   shape: 'circle'
 },
  series: [
  {
    type: 'radar',
    label: {
      show: true
   },
    data: [
    {
      name: '华为手机1',
      value: hwScore
    },
    {
      name: '中兴手机1',
      value: zxScore
    }
   ]
  }
 ]
}

image.png

仪表盘图

1 ECharts 最基本的代码结构

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="js/echarts.min.js"></script>
</head>
<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"))
    var option = {}
    mCharts.setOption(option)
  </script>
</body>
</html>

2: 准备数据, 设置给 series 下的 data

data:[97]

3: 在 series 下设置 type:gauge

var option = {
  series: [
   {
      type: 'gauge',
      data: [{
        value: 97,
     }]
   }
 ]
}

image.png

仪表盘的常见效果

数值范围: max min
多个指针: 增加data中数组的元素
多个指针颜色的差异: itemStyle

var option = {
  series: [
    {
      type: 'gauge',
      data: [{
        value: 97,
        itemStyle: {
          color: 'pink'
        }
      }, {
        value: 85,
        itemStyle: {
          color: 'green'
        }
      }],
      min: 50
    }
  ]
}

image.png

主题

默认主题
ECharts 中默认内置了两套主题: light dark
在初始化对象方法 init 中可以指明

var chart = echarts.init(dom, 'light')
var chart = echarts.init(dom, 'dark')

自定义主题

1.在主题编辑器中编辑主题
主题编辑器的地址为: https://www.echartsjs.com/theme-builder/
在该地址中, 你可以定义一个主题的很多方面的内容:

image.png
2.下载主题, 是一个 js 文件
在线编辑完主题之后, 可以点击下载主题按钮, 下载主题的js文件

image.png
3.引入主题 js 文件

<script src="js/echarts.min.js"></script>
<script src="js/itcast.js"></script>

其中, itcast.js 就是下载下来的主题文件

4.在 init 方法中使用主题

var mCharts = echarts.init(document.querySelector("div"), 'itcast')

init方法中的第二个参数itcast就是主题的名称, 这个名称叫什么我们可以在itcast.js的代码中
看出

image.png

调色盘

它是一组颜色，图形、系列会自动从其中选择颜色, 不断的循环从头取到尾, 再从头取到尾, 如此往复.

主题调色盘

echarts.registerTheme('itcast', {
  "color": [
    "#893448",
    "#d95850",
    "#eb8146",
    "#ffb248",
    "#f2d643",
    "#ebdba4"
 ],
  "backgroundColor": "rgba(242,234,191,0.15)",
  ......
})

全局调色盘
全局调色盘是在 option 下增加一个 color 的数组

var option = {
  // 全局调色盘
  color: ['red', 'green', 'blue'],
  ......
}
mCharts.setOption(option)

局部调色盘
局部调色盘就是在 series 下增加一个 color 的数组

var option = {
  // 全局调色盘
  color: ['red', 'green', 'blue'],
  series: [
   {
      type: 'pie',
      data: pieData,
      // 局部调色盘
      color: ['pink', 'yellow', 'black']
   }
 ]
}
mCharts.setOption(option)

需要注意一点的是, 如果全局的调色盘和局部的调色盘都设置了, 局部调色盘会产生效果, 这里面遵循的是就近原则

渐变颜色的实现

在 ECharts 中, 支持线性渐变和径向渐变两种颜色渐变的方式
线性渐变
线性渐变的类型为 linear , 他需要配置线性的方向, 通过 x, y, x2, y2 即可进行配置
x , y , x2 , y2 , 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 global 为 true ，则
该四个值是绝对的像素位置
在下述代码中的 0 0 0 1 意味着从上往下进行渐变

<!DOCTYPE html>
<html lang="en">
<head>
 <script src="js/echarts.min.js"></script>
</head>
<body>
 <div style="width: 600px;height:400px"></div>
 <script>
 var mCharts = echarts.init(document.querySelector("div"))
 var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大
强']
 var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
 var option = {
  xAxis: {
   type: 'category',
   data: xDataArr
 },
  yAxis: {
   type: 'value'
 },
  series: [
  {
    type: 'bar',
    data: yDataArr,
    itemStyle: {
     color: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
       offset: 0, color: 'red' // 0% 处的颜色
     }, {
       offset: 1, color: 'blue' // 100% 处的颜色
     }],
      globalCoord: false // 缺省为 false
    }
   }
  }
 ]
};
 mCharts.setOption(option)
</script>
</body>
</html>

image.png

径向渐变
线性渐变的类型为 radial , 他需要配置径向的方向, 通过 x , y , r 即可进行配置
前三个参数分别是圆心 x , y 和半径，取值同线性渐变
在下述代码中的 0.5 0.5 0.5 意味着从柱的重点点, 向外径向扩散半径为宽度一半的圆

series: [
  {
     itemStyle: {
       color: {
         type: 'radial',
         x: 0.5,
         y: 0.5,
         r: 0.5,
         colorStops: [{
           offset: 0, color: 'red' // 0% 处的颜色
        }, {
           offset: 1, color: 'blue' // 100% 处的颜色
        }],
         global: false // 缺省为 false
      }
    }
  }
]

image.png

样式

直接样式
itemStyle
textStyle
lineStyle
areaStyle
label

data: [
 {
value: 11231,
name: "淘宝",
itemStyle: {
color: 'black'
}
}
]
title: {
  text: '我是标题',
  textStyle: {
    color: 'red'
 }
}
label: {
color: 'green'
}

这些样式一般都可以设置颜色或者背景或者字体等样式, 他们会覆盖主题中的样式
高亮样式
图表中, 其实有很多元素都是有两种状态的, 一种是默认状态, 另外一种就是鼠标滑过或者点击形成
的高亮状态. 而高亮样式是针对于元素的高亮状态设定的样式
那它的使用也非常简单,在 emphasis 中包裹原先的 itemStyle 等等, 我们来试一下

series: [
{
type: 'pie',
label: {
color: 'green'
},
emphasis: {
label: {
color: 'red'
},
},
data: [{
value: 11231,
name: "淘宝",
itemStyle: {
color: 'black'
},
emphasis: {
itemStyle: {
color: 'blue'
},
}
},

自适应

步骤1: 监听窗口大小变化事件
步骤2: 在事件处理函数中调用 ECharts 实例对象的 resize 即可

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="js/echarts.min.js"></script>
</head>
<body>
  <div style=" height:400px;border:1px solid red"></div>
<script>
  var mCharts = echarts.init(document.querySelector("div"))
  var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大
强']
  var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
  var option = {
    xAxis: {
      type: 'category',
      data: xDataArr
   },
    yAxis: {
      type: 'value'
   },
    series: [
     {
        type: 'bar',
        data: yDataArr
     }
   ]
 };
mCharts.setOption(option)
  // 监听window大小变化的事件
  window.onresize = function () {
    // 调用echarts示例对象的resize方法
    mCharts.resize()
 }
  // window.onresize = mCharts.resize
</script>
</body>
</html>

动画的使用

加载动画
eCharts 已经内置好了加载数据的动画, 我们只需要在合适的时机显示或者隐藏即可
显示加载动画

mCharts.showLoading()
一般, 我们会在获取图表数据之前 显示加载动画

image.png

隐藏加载动画

mCharts.hideLoading()
一般, 我们会在获取图表数据之后 隐藏加载动画, 显示图表

增量动画

所有数据的更新都通过 setOption 实现, 我们不用考虑数据到底产生了那些变化, ECharts 会找到两组
数据之间的差异然后通过合适的动画去表现数据的变化。

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="js/echarts.min.js"></script>
</head>
<body>
  <div style="width: 600px;height:400px"></div>
<button>修改数据</button>
  <button id="btnAdd">增加数据</button>
<script>
  var mCharts = echarts.init(document.querySelector("div"))
  var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
  var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
  var option = {
    xAxis: {
      type: 'category',
      data: xDataArr
   },
    yAxis: {
      type: 'value'
   },
    series: [
     {
        type: 'bar',
        data: yDataArr
     }
   ]
 };
  mCharts.setOption(option)
  var btn = document.querySelector('button');
  btn.onclick = function () {
    var newArr = [68, 62, 93, 67, 64, 90, 52, 36]
    // setOption的方法可以被调用多次
    // 新的option 和旧的option配置
    // 新旧option配置项他们之间不是替换的关系,是相互整合的关系
    // 我们在设置新的option的时候,只需要考虑到将变化的配置项配置就可以了
    var option = {
      series: [
       {
          data: newArr,
       }
     ]
   };
    mCharts.setOption(option)
 }
  var btnAdd = document.querySelector('#btnAdd')
  btnAdd.onclick = function () {
    setInterval(function () {
      //增加数据
      xDataArr.push('小明')
      yDataArr.push(parseInt(50 + Math.random() * 10))
      var option = {
        xAxis: {
          data: xDataArr
       },
        series: [
         {
            data: yDataArr
         }
       ]
     }
      mCharts.setOption(option)
   }, 1000)
 }
</script>
</body>
</html>

动画的配置

开启动画
animation: true
动画时长
animationDuration: 5000
缓动动画
animationEasing : 'bounceOut'
linear ,线性变化, 这样动画效果会很均匀
bounceOut ,这样动画效果会有一个回弹效果
缓动动画的可选值如下图:

image.png

动画阈值
animationThreshold: 8
单种形式的元素数量大于这个阈值时会关闭动画

交互API

全局echarts对象

全局 echarts 对象是引入 echarts.js 文件之后就可以直接使用的
echarts.init

初始化ECharts实例对象
使用主题
echarts.registerTheme
注册主题
只有注册过的主题,才能在init方法中使用该主题
echarts.registerMap

// 注册地图数据
$.get('json/map/china.json', function (chinaJson) {
      echarts.registerMap('china', chinaJson);
});
geo组件使用地图数据
var option = {
  geo: {
     type: 'map',
     map: 'china',
 },
})

echarts.connect
一个页面中可以有多个独立的图表
每一个图表对应一个 ECharts 实例对象
connect 可以实现多图关联，传入联动目标为 EChart 实例，支持数组

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="js/echarts.min.js"></script>
  <script src="js/jquery.min.js"></script>
</head>
<body>
  <div style="width: 600px;height:400px;border:1px solid red"></div>
  <div style="width: 600px;height:400px;border:1px solid green" id="div1">
</div>
<script>
  var mCharts = echarts.init(document.querySelector("div"), 'itcast')
  var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大
强']
  var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
  var option = {
    xAxis: {
      type: 'category',
      data: xDataArr
   },
    toolbox: {
      feature: {
        saveAsImage: {}
     }
   },
    yAxis: {
      type: 'value'
},
    series: [
     {
        type: 'bar',
        data: yDataArr
     }
   ]
 };
  mCharts.setOption(option)
  $.get('json/map/china.json', function (chinaJson) {
    echarts.registerMap('china', chinaJson)
    var mCharts2 = echarts.init(document.querySelector('#div1'));
    var option2 = {
      geo: {
        type: 'map',
        map: 'china'
     }
   }
    mCharts2.setOption(option2)
    echarts.connect([mCharts, mCharts2])
 })
</script>
</body>
</html>

这样, 由于我们打开了toolbox中的saveAsImage, 所以会出现下载图片的按钮. 而通过
echarts.connect([mCharts, mCharts2]) , 此时点击下载图片按钮, 保存下来的图片就是两个图
表的图片了.

echartsInstance对象

eChartsInstance 对象是通过 echarts.init 方法调用之后得到的

echartsInstance.setOption
设置或修改图表实例的配置项以及数据
多次调用setOption方法
合并新的配置和旧的配置
增量动画
echartsInstance.resize

重新计算和绘制图表
一般和window对象的resize事件结合使用
window.onresize = function(){
  myChart.resize();
}

echartsInstance.on echartsInstance.off
绑定或者解绑事件处理函数
鼠标事件

常见事件: 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup' 等
事件参数 arg:  和事件相关的数据信息
mCharts.on('click', function (arg) {
  // console.log(arg)
  console.log('饼图被点击了')
})
解绑事件:
mCharts.off('click')

ECharts 事件

常见事件:
legendselectchanged、'datazoom'、'pieselectchanged'、'mapselectchanged'
等
事件参数 arg:  和事件相关的数据信息
mCharts.on('legendselectchanged', function (arg) {
  console.log(arg)
  console.log('图例选择发生了改变...')
})

echartsInstance.dispatchAction
主动触发某些行为, 使用代码模拟用户的行为

// 触发高亮的行为
mCharts.dispatchAction({
  type: "highlight",
  seriesIndex: 0,
  dataIndex: 1
})
// 触发显示提示框的行为
mCharts.dispatchAction({
  type: "showTip",
  seriesIndex: 0,
  dataIndex: 3
})

echartsInstance.clear
清空当前实例，会移除实例中所有的组件和图表
清空之后可以再次 setOption
echartsInstance.dispose
销毁实例
销毁后实例无法再被使用

最后编辑于：2020.12.11 13:35:29

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,126评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,254评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,445评论 0赞 341
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,185评论 1赞 278
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,178评论 5赞 371
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,970评论 1赞 284
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,276评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,927评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,400评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,883评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,997评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,646评论 4赞 322
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,213评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,204评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,423评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,423评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,722评论 2赞 345

01Echarts的基本使用

01Echarts的基本使用

ECharts的快速上手

相关配置

通用配置

折线图的实现步骤

折线图的常见效果

线条控制

堆叠图

散点图的实现步骤

散点图的常见效果

直角坐标系的常见配置

饼图的实现步骤

饼图的常见效果

地图

矢量地图的实现步骤

地图的常见配置

地图的常见效果

不同城市颜色不同

地图和散点图结合

雷达图

雷达图的常见效果

仪表盘图

仪表盘的常见效果

主题

自定义主题

调色盘

渐变颜色的实现

样式

自适应

动画的使用

增量动画

动画的配置

交互API

全局echarts对象

echartsInstance对象

推荐阅读更多精彩内容