09 echarts的配置

最新推荐文章于 2024-04-15 11:34:39 发布

喵喵酱仔__

最新推荐文章于 2024-04-15 11:34:39 发布

阅读量405

点赞数

分类专栏： # echart 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_38210427/article/details/130114061

版权

echart 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1 主题

1.1 默认主题

ECharts 中默认内置了两套主题: light dark

在初始化对象方法 init 中可以指明

var chart = echarts.init(dom, 'light')

var chart = echarts.init(dom, 'dark')

1.2 自定义主题

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

// 2.下载主题的js文件

// 3.在html中导入js文件

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

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

主题下载--》定制主题 --》下载js文件

2在html中导入js文件，，在init方法中指明主题的名称

为什么叫itcast？？？？因为itcast.js中定义了这个名字

2 调色盘

2.1 主题调色盘

再主题js当中，也就是上边定制主题时候的颜色盘

2.2 全局调色盘

有全局调色盘，他就会覆盖主题的调色盘

2.3 局部调色盘

<!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>
  <script src="theme/itcast.js"></script>
</head>

<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    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 = {
      color: ['red', 'green', 'blue', 'skyblue', 'purple'],
      series: [
        {
          type: 'pie',
          data: pieData,
          color: ['pink', 'yellow', 'black', 'orange', 'red']
        }
      ]
    };
    mCharts.setOption(option)
  </script>
</body>

</html>

3 颜色渐变

<!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>
  <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,
          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%处的颜色为蓝
                }
              ]
            }
          }
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>

</html>

4 样式的控制

4.1 直接样式

itemStyle

textStyle

lineStyle

areaStyle

label

4.2 高亮样式

5 自适应

<!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>

6 动画

6.1 加载动画

在获取数据的时候（调用接口的时候，数据还没有返回来），有一个加载的动画，是用户体验更好

6.2 增量动画

<!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>

6.3 动画配置项

1开启动画

animation: true

2 动画时长

animationDuration: 5000

3 缓动动画

animationEasing : 'bounceOut'

linear ,线性变化, 这样动画效果会很均匀

bounceOut ,这样动画效果会有一个回弹效果

4 动画阈值

animationThreshold: 8

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

7 交互api

7.1 全局echarts对象的方法

1init方法

2 registerTheme

3 registerMap

4connect 方法

7.2 echartsInstance对象

1 setOption方法

2 resize方法

3 on/off

4dispatchAction

主动触发某些行为, 使用代码模拟用户的行为

5echartsInstance.clear

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

6echartsInstance.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="lib/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)
      console.log('click...')
    }) // 对事件进行监听

    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: 1 // 数据的索引
      })
      mCharts.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: 2
      })
    })

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

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

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

</html>

喵喵酱仔__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
09 echarts的配置

/ 1.在线编辑主题 https://www.echartsjs.com/theme-builder/// 2.下载主题的js文件// 3.在html中导入js文件// 4.在init方法中指明主题的名称1 在线编辑主题 https://www.echartsjs.com/theme-builder/主题下载--》定制主题 --》下载js文件2在html中导入js文件，，在init方法中指明主题的名称为什么叫itcast？？？？因为itcast.js中定义了这个名字。
复制链接

扫一扫

专栏目录