ECharts高级

显示相关

主题

内置主题

  init方法有两个参数, 第一个参数代表是一个dom节点, 第二个参数, 代表你需要使用哪一套主题

默认内置了两套主题 , light  dark

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

自定义主题

1. 在线编辑主题 编辑主题
2. 下载主题的js文件
3. 在html中导入js文件 

   <script src="theme/itcast.js"></script>

4. 在init方法中指明主题的名称 

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

调色盘

它是一组颜色，图像系列会自动从中选择颜色

主题调色盘

在下载的自定义主题js中修改

echarts.registerTheme('itcast', {
        "color": [
            "#893448",
            "#d95850",
            "#eb8146",
            "#ffb248",
            "#f2d643",
            "#ebdba4"
        ]
...

全局调色盘

 var option = {
      color: ['red', 'green', 'blue', 'skyblue', 'purple']
}

局部调色盘

series: [
        {
          type: 'pie',
          data: pieData,
          color: ['pink', 'yellow', 'black', 'orange', 'red']
        }
      ]

调色盘的作用遵循就近原则

颜色渐变

线性渐变

series: [
        {
          type: 'bar',
          data: yDataArr,
          itemStyle: {
           color: {
             type: 'linear', // 线性渐变
             x: 0,
             y: 0,
             x2: 0,
             y2: 1,
             olorStops:[
              {
                offset: 0, color: 'red' // 0%处的颜色为红色
                 },
                 {
                  offset: 1, color: 'blue' // 100%处的颜色为蓝
               }
              ]
             }
            }
        }
     ]

径向渐变

itemStyle: {
         
            color: {
              type: 'radial', // 径向渐变
              x: 0.5,
              y: 0.5,
              r: 0.5,
              colorStops: [
                {
                  offset: 0, color: 'red' // 0%处的颜色为红色
                },
                {
                  offset: 1, color: 'blue' // 100%处的颜色为蓝
                }
              ]
            }
          }

样式

直接样式

itemStyle textStyle lineStyle areaStyle lable 

高亮样式

在emphasisz中包裹itemStyle textStyle lineStyle areaStyle lable 

示例

series: [
        {
          type: 'pie',

          data: [{
            value: 11231,
            name: "淘宝",
            itemStyle: { // 控制淘宝这一区域的样式
              color: 'yellow'
            },
            label: {
              color: 'green'
            },
            emphasis: {
              itemStyle: { // 控制淘宝这一区域的样式
                color: 'pink'
              },
              label: {
                color: 'black'
              }
            }
          }，...]
}
]

图表自适应功能实现

当浏览器的大小发生变化时让图表也能随之适配变化

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

mCharts.setOption(option)
    // 监听window窗口大小变化的事件
    window.onresize = function(){
      // console.log('window.onresize...')
      // 调用echarts实例对象的resize方法
      mCharts.resize()
    }
    // window.onresize = mCharts.resize

动画

加载动画

ECharts以及内置好了加载数据的动画，我们只需要在合适的时机显示或者隐藏即可

显示加载动画

mCharts.showLoading() 

隐藏加载动画

 mCharts.hideLoading() 

示例

  <script>
    // var data = 
    var mCharts = echarts.init(document.querySelector("div"))
    mCharts.showLoading() // 在获取数据之前, 显示加载动画
    $.get('data/test_data.json', function (ret) {
      mCharts.hideLoading() // 当服务器数据获取成功之后, 隐藏加载动画
      var option = {
      ...
      };
      mCharts.setOption(option)
    })

  </script>

增量动画

增量动画的实现

 mCharts.setOption(option)

• setOption 可以设置多次
•  新的option 和 旧的option
• 新旧option的关系并不是相互覆盖的关系, 是相互整合的关系
• 我们在设置新的option的时候, 只需要考虑到变化的部分就可以

Ech会找到两组数据之间的差异然后通过合适的动画去表现数据的变化

示例

<div style="width: 600px;height:400px"></div>
  <button id="modify">修改数据</button>
  <button id="add">增加数据</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,
          markPoint: {
            data: [
              {
                type: 'max', name: '最大值'
              },
              {
                type: 'min', name: '最小值'
              }
            ]
          },
          markLine: {
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },
        }
      ]
    }
    mCharts.setOption(option)

    var btnModify = document.querySelector('#modify')
    btnModify.onclick = function () {
      var newYDataArr = [68, 32, 99, 77, 94, 80, 72, 86]
     
      var option = {
        series: [
          {
            data: newYDataArr
          }
        ]
      }
      mCharts.setOption(option)
    }
    var btnAdd = document.querySelector('#add')
    btnAdd.onclick = function(){
      xDataArr.push('小明')
      yDataArr.push(90)
      var option = {
        xAxis: {
          data: xDataArr
        },
        series: [
          {
            data: yDataArr
          }
        ]
      }
      mCharts.setOption(option)
    }
  </script>

动画配置

开启动画

animation: true

动画时长

animationDuration: 7000

缓动动画

animationEasing: 'bounceOut

动画阈值

animationThreshold: 7

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

示例

 <div style="width: 600px;height:400px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"))
    var option = {
      animation: true,  // 控制动画是否开启
      // animationDuration: 7000, // 动画的时长, 它是以毫秒为单位
      animationDuration: function(arg){
        console.log(arg)
        return 2000 * arg
      },
      animationEasing: 'bounceOut', // 缓动动画
      animationThreshold: 7, // 动画元素的阈值
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      yAxis: {
        type: 'value'
      },
      series: [
        ...
      ]
    };
    mCharts.setOption(option)
  </script>

交互api

全局 echarts对象

init

初始化ECharts实例对象

使用主题

registerTheme

注册主题

只有注册过的主题，才能在init方法中使用该主题

registerMap

注册地图数据

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

geo组件使用地图数据

var option2 = {
        geo: {
          type: 'map',
          map: 'chinaMap'
        }
      }

connect

一个页面中可以有多个独立的图表

每一个图表对应一个ECharts实例对象

connect可以实现多图关联传入联动目标为ECharts实例对象，支持数组

• 保持图片的自动拼接
• 刷新按钮
• 重置按钮
• 提示框联动，图例选择，数据范围修改

 echarts.connect([mCharts, mCharts2])

echartsaknsinstance对象/echart实例对象

setOption方法

resize方法

on/off方法

绑定或解绑事件处理函数

鼠标事件

        常见事件 click mouserdown mousermove mouserup 等

        事件参数 arg 和事件相关的数据信息

ECharts事件

        常见 legendselectchchanged    datazoom   pleselectchanged   mapselecthchanged

   mCharts.on('legendselectchanged', function (arg) {
      console.log(arg)
      console.log('legendselectchanged')//图例筛选发生改变
    })

dispatchAcion方法

使用代码模拟用户的行为

$('#btn1').click(function () {
      // 模拟用户的行为
      mCharts.dispatchAction({
        type: 'highlight',//高亮
        seriesIndex: 0, // 系列的索引
        dataIndex: 1 // 数据的索引
      })
      mCharts.dispatchAction({
        type: 'showTip',//展示提示框
        seriesIndex: 0,
        dataIndex: 2
      })
    })

clear 方法

• 清空当前实例会移除实例中的所有组件和图表
• 清空之后可以再次setOption

dispose方法

• 销毁实例
• 销毁实例无法再被使用

$('#btn2').click(function () {
      // 清空图表的实例
      mCharts.clear()
    })

    $('#btn3').click(function () {
      // 重新设置option
      mCharts.setOption(option)
    })

    $('#btn4').click(function () {
      // 销毁mCharts
      mCharts.dispose()
    })