ECharts的高级使用

1）内置主题
●ECharts中默认内置了两套主题:ight dark
●在初始化对象方法init中可以指明
var chart = echarts.init(dom, 'light');
var chart = echarts.init(dom, 'dark');
2）自定义主题
●1.在主题编辑器中编辑主题
●2.下载主题, 是一个js文件
●3.引入主题js文件
●4.在init方法中使用主题

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

<body>
  <div style="width: 600px;height:400px"></div>
  <script>
     var mCharts = echarts.init(document.querySelector("div"), 'itcast')  
</script>
</body>

(2)调色盘和颜色渐变

调色盘（使用遵循就近原则）：

 //1.主题调色盘
    var mCharts = echarts.init(document.querySelector("div"), 'itcast')
    var pieData = [
      {
        value: 11231,
        name: "淘宝",
      },
      {
        value: 22673,
        name: "京东"
      },
      {
        value: 6123,
        name: "唯品会"
      },
      {
        value: 8989,
        name: "1号店"
      },
      {
        value: 6700,
        name: "聚美优品"
      }
    ]
    var option = {
      //2.全局调色盘
      color: ['red', 'green', 'blue', 'skyblue', 'purple'],
      series: [
        {
          type: 'pie',
          data: pieData,
          // 3 局部调色盘
          color: ['pink', 'yellow', 'black', 'orange', 'red']
        }
      ]
    };
    mCharts.setOption(option)

颜色渐变

    series: [
        {
          
          itemStyle: {
            /*
          //线性渐变（从上倒下）
            color: {
              type: 'linear', // 线性渐变
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops:[
                {
                  offset: 0, color: 'red' // 0%处的颜色为红色
                },
                {
                  offset: 1, color: 'blue' // 100%处的颜色为蓝
                }
              ]
           }*/
            color: {
              type: 'radial', // 径向渐变
              x: 0.5,
              y: 0.5,
              r: 0.5,
              colorStops: [
                {
                  offset: 0, color: 'red' // 0%处的颜色为红色
                },
                {
                  offset: 1, color: 'blue' // 100%处的颜色为蓝
                }
              ]
            }
          }
        }
      ]

线性渐变效果：

径向渐变效果：

(3)样式

1）直接样式
itemStyle、textStyle、lineStyle、areaStyle、label
这些样式一般都可以设置颜色或者背景或者字体等样式, 他们会覆盖主题中的样式

data: [
{
value: 11231,
name: "淘宝",
itemStyle: {
color: 'black' // 控制淘宝这一区域的样式
}
}
]
title: {
text: '我是标题',
textStyle: {
color: 'red'
}
}
label: {
color: 'green'// 控制淘宝这一文字的样式
}

2）高亮样式
图表中, 其实有很多元素都是有两种状态的, 一种是默认状态, 另外一种就是鼠标滑过或者点击形成
的高亮状态. 而高亮样式是针对于元素的高亮状态设定的样式在emphasis 中包裹原先的itemStyle 等等

 series: [
        {
          type: 'pie',

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

优先级高,会覆盖主题中、调色盘的效果

（4）自适应

当浏览器的大小发生变化的时候,如果想让图表也能随之适配变化
●1. 监听窗口大小变化事件
●2.在事件处理函数中调用ECharts实例对象的resize即可
window.onresize = function(){
myChart.resize();
}

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

二动画的使用

（1）加载动画

ECharts已经内置好了加载数据的动画，我们只需要在合适的时机显示或者隐藏即可
●显示加载动画
mCharts.showLoading()
●隐藏加载动画
mCharts.hideLoading()

（2）增量动画的实现方式

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
</head>

<body>
  <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: '平均值'
              }
            ]
          },
          label: {
            show: true,
            rotate: 60
          },
          barWidth: '30%'
        }
      ]
    }
    mCharts.setOption(option)

    var btnModify = document.querySelector('#modify')
    btnModify.onclick = function () {
      var newYDataArr = [68, 32, 99, 77, 94, 80, 72, 86]
      // setOption 可以设置多次
      // 新的option 和 旧的option
      // 新旧option的关系并不是相互覆盖的关系, 是相互整合的关系
      // 我们在设置新的option的时候, 只需要考虑到变化的部分就可以
      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>
</body>

</html>

（3）动画配置项

动画配置项
●开启动画
animation: true
●动画时长
animationDuration: 5000（可设置回调函数）
●缓动动画
animationEasing: 'bounceOut'（缓动动画）
●动画阈值
animationThreshold: 8
单种形式的元素数量大于这个阈值时会关闭动画

三交互API

全局echarts对象是引入echarts.js文件之后就可以直接使用的
echartsInstance对象是通过echarts.init方法调用之后得到的

（1）全局echarts对象方法

1)init

初始化ECharts实例对象
使用主题（light或dark）

2)registerTheme

注册主题.
只有注册过的主题,才能在init方法中使用该主题
3)registerMap

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

4)connect

●一个页面中可以有多个独立的图表
●每一个图表对应一个ECharts实例对象
●connect 可以实现多图关联，传入联动目标为ECharts实例对象，支持数组。
保存图片的自动拼接
刷新按钮
重置按钮
提示框联动、图例选择、数据范围修改等.....

（2）echartsInstance对象方法

■setOption

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

■resize

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

■on\off

●绑定或者解绑事件处理函数
●鼠标事件
常见事件: 'click'. 'dblclick'. 'mousedown'. 'mousemove'. 'mouseup' 等
事件参数arg:和事件相关的数据信息
●ECharts事件
常见事件:legendselectchanged. 'datazoom'. 'pieselectchanged'. 'mapselectchanged' 等
事件参数arg：和事件相关的数据信息

■dispatchAction

●触发某些行为
●使用代码模拟用户的行为
mCharts.dispatchAction({
type: 'highlight', //事件类型
seriesIndex: 0,//图表索引
dataIndex: 1//图表中哪一项高亮
});
■clear

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

●销毁实例
●销毁后实例无法再被使用