数据 可视化大屏-Vue-2图表高级配置

1.显示相关

①主题

内置主题：light  dark

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

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

自定义主题：

1.在线编辑主题 https://www.echartsjs.com/theme-builder/

2.下载主题的js文件

3.在html中导入js文件 <script src="theme/itcast.js">

4.在init方法中指明主题的名称 var mCharts = echarts.init(document.querySelector('div'), '主题名称')

主题名称：根据echarts.registerTheme(" 主题名称 ",{}) 指定的

②调色盘：就近原则( 局部覆盖全局覆盖主题 )

主题的调色盘

echarts.registerTheme('itcast', {

        "color": [

                "#893448",  "#d95850",   "#eb8146", "#ffb248", "#f2d643",  "#ebdba4"

         ],

}）

全局的调色盘

var option = {

      color: ['red', 'green', 'blue', 'skyblue', 'purple'],

}

局部的调色盘

series: [

   {   color: ['pink', 'yellow', 'black', 'orange', 'red']    }

]

颜色渐变

      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%处的颜色为蓝
                }
              ]
            },
          }
        }
      ]

③样式

直接样式：直接写样式

itemStyle某区域样式、textStyle文字样式、lineStyle折线图的线条的样式、areaStyle折线图的区域的样式、label图例文字的样式

高亮样式：在emphasis里面写样式

emphasis: {

        itemStyle: { // 控制淘宝这一区域的样式

                color: 'pink'  // 高亮时显示的颜色

        },

        label: {

                color: 'black'

        }

}

④自适应

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


<script>  //写法二
  window.onresize = mCharts.resize
</script>

2.动画的使用

①加载动画

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

②动画配置

  var option = {
      animation: true,  // 控制动画是否开启
      // animationDuration: 7000, // 动画的时长, 它是以毫秒为单位
      animationDuration: function(arg){
        console.log(arg)  //arg打印值：平均值 最大值 最小值 x轴上的各个数值
        return 2000 * arg
      },
      animationEasing: 'bounceOut', // 缓动动画：均速linear 回弹bounceOut等
      animationThreshold: 7, // 动画元素的阈值：x轴上的元素数量
    };

3.全局Echarts对象：echarts

①初始化方法init

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

②注册主题regiterTheme

<script src="theme/itcast.js"></script>
theme/itcast.js"文件里面的代码：
  echarts.registerTheme('itcast', { 基本配置  })

③注册地图regiterMap 并 关联多个图表connect

 var mCharts2 = echarts.init(document.querySelector('#div1'))
    $.get('json/map/china.json', function(ret){
      echarts.registerMap('aa', ret)
      var option2 = {
        geo: {
          type: 'map',
          map: 'aa'
        }
      }
      mCharts2.setOption(option2)
      echarts.connect([mCharts柱状图, mCharts2地图]) // 将柱状图和地图关联起来
    })
    

4.34.echartsInstance对象mCharts 

setOption方法：mCharts.setOption(option)

clear方法： 清空图表的实例  mCharts.clear()

dispose方法： 销毁mCharts   mCharts.dispose()

on方法：对事件进行监听  mCharts.on('click', function (arg) {  console.log(arg) }) 

var option = {
   legend: {
      data: ['淘宝', '京东', '唯品会', '1号店', '聚美优品']
   },
}
mCharts.on('legendselectchanged', function (arg) {
      console.log(arg)
      console.log('legendselectchanged')
})

off方法：解绑click的事件 mCharts.off('click') 

dispatchAction方法： 模拟用户的行为

mCharts.dispatchAction({
     type: 'highlight',  //高亮事件
     seriesIndex: 0, // 哪一个图表
     dataIndex: 1 // 图表的哪一项高亮
})
mCharts.dispatchAction({
     type: 'showTip',  //提示框事件
     seriesIndex: 0,
     dataIndex: 2
})