07-ECharts显示相关(主题、调色盘、图表自适应)、动画相关(图表加载动画、增量动画、动画配置项)、交互API(全局echarts对象的方法、echartsInstance对象的方法)

最新推荐文章于 2024-06-28 08:46:07 发布

请问大家代码怎么敲

最新推荐文章于 2024-06-28 08:46:07 发布

阅读量369

点赞数

分类专栏： js Echarts 数据可视化

本文链接：https://blog.csdn.net/liumuye88888/article/details/116850203

版权

js 同时被 3 个专栏收录

23 篇文章 1 订阅

订阅专栏

Echarts

7 篇文章 0 订阅

订阅专栏

数据可视化

7 篇文章 0 订阅

订阅专栏

显示相关

内置主题

Echarts中默认内置了两套主题:light dark
在初始化对象方法init中可以指明
init有两个参数,第一个参数是dom节点,第二个参数是主题
默认内置了两套主题 , light dark

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

light
在这里插入图片描述
dark

除此之外我们也可以自定义主题

自定义使用主题内容

1.在主题编辑器中编辑主题
进入官网点击主题下载,点击定制主题
在这里插入图片描述

2.下载主题,是一个js文件
在这里插入图片描述

3.引入主题js文件
把js主题引入html中
在这里插入图片描述
4.在init方法中使用主题

init中主题的名字应该是js中echarts.registerTheme(‘customed’,{}),一般下载的话和js文件同名,有兴趣可以看下主题js代码

调色盘的使用

调色盘遵循就近原则,引用了主题,没有用全局、局部。调色盘,颜色就采用主题的,引用了全局就会替代主题的,引用了局部就会替代全局的。

调色盘分为
1.自定义主题调色盘
在这里插入图片描述

2.全局调色盘,全局调色盘写在option里面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../echarts.min.js"></script>
    <script src="./customed.js"></script>
</head>
<body>
    <div style="width: 600px;height: 600px;"></div>
    
</body>
<script>
    // 调色盘遵循就近原则
    var mCharts = echarts.init(document.querySelector('div'),'customed')
    var pieData = [
        {
            value:5000,
            name:'淘宝'
        },
        {
            value:6000,
            name:'京东'
        },  
        {
            value:1000,
            name:'拼多多'
        }, 
         {
            value:8000,
            name:'苏宁易购'
        },
    ]
    var option = {
        // 全局调色盘，会覆盖主题的调色盘
        color:['red','green','blue','purple'],
        series:[
            {
                type:'pie',
                data:pieData,
            
            }
        ]

    }
    mCharts.setOption(option)
</script>
</html>

在这里插入图片描述

3.局部调色盘

 series:[
            {
                type:'pie',
                data:pieData,
                局部调色盘,会覆盖全局调色盘
                color:['pink','blue','red','green']
            }
        ]

在这里插入图片描述

颜色渐变

1.线性渐变(linear)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../echarts.min.js"></script>
    <script src="./customed.js"></script>
</head>
<body>
    <div style="width: 600px;height: 600px;"></div>
    
</body>
<script>
    var mCharts = echarts.init(document.querySelector('div'),'customed')
    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,
            itemStyle:{
                color:{
                    type:'linear', //线性渐变
                    x:0,
                    y:0,
                    x2:0,
                    y2:1, //从上到下
                    colorStops:[
                        {
                            offset:0,color:'red' // 0%处是红色
                        },
                        {
                            offset:1,color:'blue' // 100%除是红色
                        }
                    ]
                }
            markPoint:{
                data:[
                    {
                        type:'min',name:'最小值'
                    },
                    {
                        type:'max',name:'最大值'
                    }
                ]
            },
            markLine:{
                data:[
                    {
                        type:'average',name:'平均值'
                    }
                ]
            },
            label:{
                show:true,
                rotate:60
            },
            barWidth:'30%'
        }
    ]

    }
    mCharts.setOption(option)
</script>
</html>

在这里插入图片描述

2.径向渐变(radial)，书写位置和线性渐变一样

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

在这里插入图片描述

样式的使用

以饼图为例
1.给每个饼图的数据对象加上itemStyle,lable可以设置他们自身和标题的颜色
2.textStyle可以给title标题设置颜色
3.悬停高亮颜色的话是emphasis里面再嵌套itemStyle或textStyle等…

<!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="../echarts.min.js"></script>
</head>

<!-- itemStyle   textStyle  label  emphasis(高亮的颜色)-->
<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"))
    var option = {
      title: {
        text: '饼图的测试',
        textStyle: { // 控制标题的文字样式
          color: 'blue'
        }
      },
      series: [
        {
          type: 'pie',

          data: [{
            value: 11231,
            name: "淘宝",
            itemStyle: { // 控制淘宝这一区域的样式
              color: 'yellow'
            },
            label: {
              color: 'green'
            },
            emphasis: {
              itemStyle: { // 控制淘宝这一区域的样式
                color: 'pink'
              },
              label: {
                color: 'black'
              }
            }
          },
          {
            value: 22673,
            name: "京东"
          },
          {
            value: 6123,
            name: "唯品会",
          },
          {
            value: 8989,
            name: "1号店"
          },
          {
            value: 6700,
            name: "聚美优品"
          }]
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>

</html>

图表自适应的实现

div容器不设置宽度监听window窗口大小的变化
两种写法都可以是实现

 1.  window.onresize = function(){
      // console.log('window.onresize...')
      // 调用echarts实例对象的resize方法
      mCharts.resize()
    }

  2. window.onresize = mCharts.resize

<!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="height:400px;border: 1px solid red"></div>
  <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)
    // 监听window窗口大小变化的事件
    window.onresize = function(){
      // console.log('window.onresize...')
      // 调用echarts实例对象的resize方法
      mCharts.resize()
    }
    // window.onresize = mCharts.resize

  </script>
</body>

</html>

动画相关

图表加载动画的实现

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../echarts.min.js"></script>
    <script src="./lib/jquery.min.js"></script>
</head>
<body>
    <div style="width: 600px;height: 600px;"></div>
</body>
<script>
     //1. ECharts最基本的代码结构
    //2. 准备中国地图的矢量数据
    //3. 使用Ajax获取矢量地图数据
    //4. 在Ajax的回调函数中注册地图矢量数据 echarts.registerMap('chinaMap', 矢量地图数据)
    //5. 配置geo的type为'map', map为'chinaMap' 
    var mCharts = echarts.init(document.querySelector('div'))
    mCharts.showLoading() //获取数据之前,显示动画
    $.get('map/china.json',function(ret){
        mCharts.hideLoading()//隐藏动画
        // console.log(ret);
        echarts.registerMap('chinaMap',ret)
        var option = {
        geo:{
            type:'map',
            map:'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致
            roam:true,  //设置允许缩放、拖动
            label:{
                show:true
            },
            zoom:2, //初始化比例
            center:[87.617733,43.792818] //地图中心点
        }
    }
    mCharts.setOption(option)
    })
    
   
</script>
</html>

增量动画的实现

<!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="../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>

动画的配置项

1.animation为布尔值,默认为true开启
2.animationDuration动画时长(毫秒),也可以是一个函数,如果是函数,函数里面的值是窗口内做动画的数据
3.animationEasing缓动动画,值为,‘bounceOut’,'backIn’的等等,其他值请前往ECharts官网
4.animationThreshold数值类型是否开启动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画。

<!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="../echarts.min.js"></script>
</head>

<body>
  <div style="width: 600px;height:400px"></div>

  <script>
    var mCharts = echarts.init(document.querySelector("div"))
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
    var option = {
        animation:true,  //控制动画是否开启
        // animationDuration:7000, //动画时长,以毫秒为单位
        animationDuration:function(arg){
            console.log(arg); //0 0 1 0 1 2 3 4 5 6 7 分别是线 最大值, 最小值, 张三，李四，等等。。。
            return 2000 * arg

        },
        animationEasing:'bounceOut',  //缓动动画
        animationThreshold:20   //是否开启动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画。
        ,
      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)
  </script>
</body>

</html>

交互API

全局echarts对象的方法

全局echarts对象引入echarts.js文件之后就可以直接使用

1.init 初始化echarts实例对象,使用主题
2.registerTheme自定义主题,注册主题
3.registerMap 注册地图数据
4.connect 多个图表进行关联,在option中加入toolbox>feature>saveAsImage:{}可以下载图片,如果有多个mCharts 不用connect进行关联,点击哪一个就下载哪一个,关联的话两个都会下载。如:(echarts.connect([mCharts, mCharts2]))

toolbox: {
        feature: { 
          saveAsImage: {} //可以保存图片
        }

<!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="../echarts.min.js"></script>
  <script src="./customed.js"></script>
  <script src="./lib/jquery.min.js"></script>
</head>

<body>
  <div  style="width: 600px;height:400px;border: 1px solid red"></div>
  <div id="div1" style="width: 600px;height:400px;border: 1px solid red"></div>
 
  <script>
    var mCharts = echarts.init(document.querySelector("div"),'customed')
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
    var option = {
      toolbox: {
        feature: { 
          saveAsImage: {} //可以保存图片
        }
      },
      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 mCharts2 = echarts.init(document.querySelector('#div1'))
    $.get('map/china.json', function(ret){
      echarts.registerMap('aa', ret)
      var option2 = {
        geo: {
          type: 'map',
          map: 'aa'
        }
      }
      mCharts2.setOption(option2)
      echarts.connect([mCharts, mCharts2]) // 将柱状图和地图关联起来
    })
    

  </script>
</body>

</html>

echartsInstance对象的方法

echartsInstance对象是通过echarts.init方法调用之后得到的

1.setOption方法
-设置或修改图表实例的配置项以及数据
-多次调用setOption方法,合并配置,不会覆盖
-增量动画(看本篇动画相关-增量动画的实现)
2.resize方法
-重新计算和绘制图表
-一般和window对象resize事件结合使用(看本篇显示相关-图表自适应的实现)
3.on/off方法
-绑定或者接触绑定事件处理函数
-鼠标事件 click dblclick mousedown mousemove 等等。。。
Echarts事件
4.dispathchAction方法
-触发某些行为
-使用代码模拟用户行为更多dispathchAction方法请前往Echarts官网
5.clear方法
-清空当前实例,会溢出实例中所有的组件和图表
-清空后可以再次setOption
6.dispose方法
-销毁实例
-销毁后实例无法再次被使用

<!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="../echarts.min.js"></script>
  <script src="./lib/jquery.min.js"></script>
</head>

<body>
  <div style="width: 600px;height:400px"></div>
  <button id="btn1">触发行为</button>
  <button id="btn2">clear</button>
  <button id="btn3">setOption</button>
  <button id="btn4">dispose</button>
  <script>
    var mCharts = echarts.init(document.querySelector("div"))
    var pieData = [
      {
        value: 11231,
        name: "淘宝",
      },
      {
        value: 22673,
        name: "京东"
      },
      {
        value: 6123,
        name: "唯品会"
      },
      {
        value: 8989,
        name: "1号店"
      },
      {
        value: 6700,
        name: "聚美优品"
      }
    ]
    var option = {
      legend: { //筛选
        data: ['淘宝', '京东', '唯品会', '1号店', '聚美优品']
      },
      tooltip: {
        show: true
      },
      series: [
        {
          type: 'pie',
          data: pieData
        }
      ]
    }
    mCharts.setOption(option)
    mCharts.on('click',function(arg){
        console.log(arg);

    })
    mCharts.off('click') //解除click的事件
   mCharts.on('legendselectchanged',function(arg){
       console.log(arg);
       console.log('legendselectchanged');})
       $('#btn1').click(function(){
        //    模拟用户的行为
        mCharts.dispatchAction({
            type:'highlight',
            seriesIndex:0,//图表索引
            dataIndex:0 // 数据的索引
        })
        mCharts.dispatchAction({
            type:'showTip',
            seriesIndex:0,//图表索引
            dataIndex:0 // 数据的索引
        })
       })
       $('#btn2').click(function(){
        //    清空图表的实例
            mCharts.clear()
       })
       $('#btn3').click(function(){
        //    重新设置option
            mCharts.setOption(option)
       })

       $('#btn4').click(function(){
        //    销毁mCharts实例
            mCharts.dispose()
       })
  </script>
</body>

</html>