echarts的学习（五）内置主题与自定义主题的学习

最新推荐文章于 2024-09-11 09:53:45 发布

一写代码就开心

最新推荐文章于 2024-09-11 09:53:45 发布

阅读量961

点赞数

分类专栏： echarts 文章标签： js

本文链接：https://blog.csdn.net/python113/article/details/112067200

版权

echarts 专栏收录该内容

9 篇文章

订阅专栏

主题学习

内置主题
自定义主题

内置主题

在这里插入图片描述

默认内置了两套主题 , light dark
在这里插入图片描述

创建charts对象的时候，多了一个参数，里面的值就可以写默认的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>
  <script>
    // init方法有两个参数, 第一个参数代表是一个dom节点, 第二个参数, 代表你需要使用哪一套主题
    // 默认内置了两套主题 , light  dark
    var mCharts = echarts.init(document.querySelector("div"), 'dark')
    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)
  </script>
</body>

</html>