echarts-设置主题+调色盘+尺寸自适应+增量动画、等待动画

设置主题

我们在 echarts.init 初始化的时候 除了传入第一个参数 元素盒子外 还可以跟第二个参数  字符串：表示主题 

默认有两个主题  light明  dark暗 
还可以在官网定制生成 theme.js 文件 引入
主题编辑器 - Apache ECharts
let mCharts = echarts.init(document.querySelector('#main'),'dark')

 调色盘

主题调色盘 全局调色盘 局部调色盘 影响：就近原则 

这里：外部整体、系列整体都指定了颜色  但最终的显示效果是由最近的 每一项渐变决定的

color:['#001852','#f5e8c8','#b8d2c7','#c6b38e'],
    tooltip: {},
    legend: {
      data: ['销量']
    },
    xAxis: {
      data: XXData
    },
    yAxis: { // Y轴
      type:'value' // 数值轴
    },
    series: [
      {
        name: '销量',
        type: 'bar',
        data: YYData,
        color: ['#82b6e9','#ff6347','#a092f1','#0a915d','#eaf889',],
        itemStyle:{
          color:{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#82b6e9' // 0% 处的颜色
            }, {
              offset: 1, color: '#a092f1' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
}
]

相关动画： 

  let options2 = {
    animation:true, // 控制动画是否开启
    //animationDuration:2000,// 控制动画 时长 也可以用回调函数
    animationDuration: function(arg){
      return 500 * arg // 这样设置就是 后面的比前一个动画时长多了 0.5s
    },
 
    animationEasing:'bounceOut', // 动画效果 带反弹的 还有其他的可查阅官方文档
 
    animationThreshold:11, // 单元数量大于这个数就会关闭动画 提高性能
}

 尺寸自适应 以及更新数据操作

当window窗户口发生变化时 调用 echarts.resize() 重置尺寸事件 保持页面比例稳定

修改数据 直接修改数据源 数组相关的操作方法  再调用 setOption(设置) 方法 图表会自动渲染 不必关心 视图 只重视数据就行了 

  window.addEventListener('resize',function () {
    exec.resize()
  })
 
  // window.onresize = exec.resize   精简写法 应该不需要
 
document.querySelector('#edit').onclick = function () {
 let options = {
   series: [
     {
       data: [51, 36, 36, 18, 19, 28],
     }
     ]
 }
  exec.setOption(options)
}
 
  document.querySelector('#addr').onclick = function () {
    XXData.push('碎花裙')
    YYData.push(38)
 
    let options = {
      xAxis: {
        data: XXData
      },
      series: [
        {
          data: YYData,
        }
      ]
    }
    exec.setOption(options)
  }

等待动画 在合适的时候开启和关闭

mCharts.showLoading()
mCharts.hideLoading()

  let mCharts = echarts.init(document.querySelector('#main'))
  mCharts.showLoading() // 在获取数据之前 显示加载动画
  $.get('../lib/sandianData.json',function (res) {
    mCharts.hideLoading() // 当服务器获取数据成功之后 隐藏加载动画