Echarts基础（一）

ECharts

ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。

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

下载方式

使用ECharts的五个步骤

步骤1：引入echarts.js文件

  步骤2：准备一个呈现图表的盒子

  步骤3：初始化echarts实例对象

  步骤4：准备配置项

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

通用配置

标题：title

• 文字样式：

        textstyle

• 标题边框

        borderWidth    borderColor    borderRadius

• 标题位置

        left right bottom top

提示：tooltip

提示框组件，用于配置鼠标滑过或点击图表时的显示框

• 触发类型：trigger

        item axis

• 触发时机：triggerOn

        click mouseover

• 格式化： formatter

        字符串模板  回调函数

工具按钮 toolbox

ECharts提供的工具栏

内置有导出图片 数据视图 动态类型切换 数据区域缩放 重置五个工具

显示工具栏按钮 feature

toolbox: {
        feature: {
          saveAsImage: {}, // 导出图片
          dataView: {}, // 数据视图
          restore: {}, // 重置
          dataZoom: {}, // 区域缩放
          magicType: {
            type: ['bar', 'line']
          } // 动态图表类型的切换
        }
      }

图例 legend

用于筛选系列需要和series配合使用

• legend中的data是一个数组
• legend中data的值需要和series数组中某组数据的name值相同

示例

柱状图

series中type值为bar

常见效果

标记 最大值 最小值 平均值

markPoint

markLine

显示：数值显示 柱宽带 横向柱状图

label

barWidth

更改x轴和y轴的角色

示例

 

折线图

将type的值设置为line

常见效果

标记 最大值 最小值 平均值 标注区间

• markPoint
• markLine
• markArea

线条控制

• smooth  
• lineStyle

填充风格

areaStyle

紧挨边缘

boundaryGap

缩放 脱离0值比例  数据相差不大时使用

scale：true

堆叠图

stack

示例

 

散点图

• x轴和y轴的数据：二维数组

        数组1：[[身高1，体重1],[身高2，体重2],[身高3，体重3]......]

• 在series下设置type：scatter
• xAxis和yAxis的type都要设置为value
• 将坐标轴都设置为脱离0值比例 scale

常见效果

气泡图效果

•         散点的大小不同  sybolSize
•         散点的颜色不同 itemStyle.color

涟漪动画效果

type: 'effectScatter', // 指明图表为带涟漪动画的散点图
          showEffectOn: 'emphasis', // 出现涟漪动画的时机 render emphasis
          rippleEffect: {
            scale: 10 // 涟漪动画时, 散点的缩放比例
          }

示例

 

var axisData = [[身高1，体重1],[身高2，体重2],[身高3，体重3]......]
   console.log(axisData)

    var mCharts = echarts.init(document.querySelector("div"))
    var option = {
      xAxis: {
        type: 'value',
        scale: true
      },
      yAxis: {
        type: 'value',
        scale: true
      },
      series: [
        {
          // type: 'scatter',
          type: 'effectScatter', // 指明图表为带涟漪动画的散点图
          showEffectOn: 'emphasis', // 出现涟漪动画的时机 render自动拥有 emphasis 鼠标移动产生效果
          rippleEffect: {
            scale: 10 // 涟漪动画时, 散点的缩放比例
          },
          data: axisData,
          // symbolSize: 30
          symbolSize: function (arg) { // 控制散点的大小
            // console.log(arg)
            var height = arg[0] / 100
            var weight = arg[1]
            // bmi = 体重kg / (身高m*身高m)   大于28,就代表肥胖
            var bmi = weight / (height * height)
            if (bmi > 28) {
              return 20
            }
            return 5
          },
          itemStyle: { // 控制散点的样式
            color: function (arg) {
              // console.log(arg)
              var height = arg.data[0] / 100
              var weight = arg.data[1]
              // bmi = 体重kg / (身高m*身高m)   大于28,就代表肥胖
              var bmi = weight / (height * height)
              if (bmi > 28) {
                return 'red'
              }
              return 'green'
            }
          }
        }
      ]
    }
    mCharts.setOption(option)

直角坐标系常用配置

配置1网格 grid

grid 控制直角坐标系的布局和大小

• 显示grid
• show

grid边框

•  borderWidth  borderColor

grid位置和大小

•   left right bottom top  
• width height

配置2 坐标轴

• value 数值轴自动从目标数据中 读取数据
• category 类目轴  需要通过data设置类目数据显示位置

position

• xAxis 可取值为top 和 buttom
• yAxis 可取值为 left 和 right

配置3 区域缩放筛选 dataZoom

dataZoom是一个数组意味着可以配置多个区域缩放

注意点和toolbox中的dataZoom不同

类型 type 

• slider 滑块
• inside 内置，依靠鼠标滚轮或双指缩放

指明产生作用的轴

• xAxisindex 设置缩放组件控制的是哪个x轴 一般写0即可
• yAxisindex 设置缩放组件控制的是哪个y轴 一般写0即可

指明初始状态的缩放情况

• start end

示例

 

小结

直角坐标系的图表

• 柱状图
• 折线图
• 散点图

网格grid

• x和y轴的依附
• 大小
• 边框

区域缩放 dataZoom

• x和y轴都可以设置
• 类型  inside slider