美文网首页
Echarts-详细配置-功能升级 (五)

Echarts-详细配置-功能升级 (五)

作者: coderhzc | 来源:发表于2022-12-10 15:35 被阅读0次

    一 认识option配置项

    image.png

    二.简单绘制-折线,柱状...配置背景色

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="main" style="height: 400px"></div>
    <script src="../libs/echarts-5.3.3.js"></script>
    <script>
      window.onload = function () {
        // 切换为svg的渲染器( 默认是canvas )
        let myChart = echarts.init(document.getElementById("main"), "dark", {
          renderer: "svg",
        });
        let option = {
          xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          },
          yAxis: {},
          series: [
            {
              type: "bar",
              data: [5, 20, 36, 10, 10, 20],
            },
          ],
        };
        myChart.setOption(option);
      };
    </script>
  </body>
</html>
    image.png

    实际截图


    image.png

    三.Grid网格配置(组件)

    image.png 
     <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="main" style="height: 400px"></div>
    <script src="../libs/echarts-5.3.3.js"></script>
    <script>
      window.onload = function () {
        let myChart = echarts.init(document.getElementById("main"));
        let option = {
          // ECharts的背景
          backgroundColor: "rgba(255, 0, 0, 0.1)",

          // grid 网格组件( 绘图区域 )
          grid: {
            show: true,
            backgroundColor: "rgba(0, 255, 0, 1)",
            // top: 0,
            // bottom: 0,
            left: 0,
            // right: 0,
            containLabel: false,
          },

          xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          },
          yAxis: {},
          series: [
            {
              type: "bar",
              data: [5, 20, 36, 10, 10, 20],
            },
          ],
        };
        myChart.setOption(option);
      };
    </script>
  </body>
</html>

    实际截图

    image.png

    三.一 grid网格 containLabel属性 如何为false(当为false的时候柱状图的 Y 轴的数据是不会显示出来的,此时你需要去手动的调整,top left right bottom的值了)

    image.png

    当为false的时候柱状图的 Y 轴的数据是不会显示出来的,此时你需要去手动的调整,top left right bottom的值了

     grid: {
            show: true,
            backgroundColor: "rgba(0, 255, 0, 1)",
            // top: 0,
            // bottom: 0,
            left: 300,
            // right: 0,
            containLabel: false,
          },

    实际截图

    image.png

    三.一 grid网格 containLabel属性 如何为true(当为true的时候 可以不设置left right top bottom的值,他会自动调整)

    grid: {
            show: true,
            backgroundColor: "rgba(0, 255, 0, 1)",
            // top: 0,
            // bottom: 0,
            // left: 0,
            // right: 0,
            containLabel: true,
          },
    image.png

    四.坐标系配置(组件)

    image.png

    源码配置代码:

    四.一 xAxis 中的show: true 配置的意义:

    image.png

    四.二 xAxis 中的 name:'类目坐标' 配置的意义:

    image.png

    四.三 xAxis中的 axisLine对象的配置

    image.png

    四.四 xAxis中的 axisLabel对象的配置

    image.png

    四.五 xAxis中的 axisTick对象的配置

    image.png

    四.五 xAxis中的 splitLine 对象的配置

    image.png

    四.五 yAxis中的name属性:

    image.png

    五.ECharts-series-系列图

    image.png

    所有代码

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <div id="main" style="height: 400px"></div>
  <script src="../libs/echarts-5.3.3.js"></script>
  <script>
    window.onload = function() {
      let myChart = echarts.init(document.getElementById('main'));
      let option = {
        backgroundColor: 'rgba(255, 0, 0, 0.1)',
        grid: {
          show: true,
          backgroundColor: 'rgba(0, 255, 0, 0.1)',
        },
        

        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            type: 'bar',
            label: { 
              show: true
            },
            // 方式一
            // data: [5, 20, 36, 10, 10, 20],
              
                   
            // 方式二
            // data: [
            //   // x index ,  y value
            //   [2, 36],
            //   [3, 10],
            //   [4, 10],
            //   [5, 20],
            //   [0, 5],
            //   [1, 20],
            // ],

            // 方式三(推荐)
            // data: [
            //   {
            //     value: 5,
            //     name: "衬衫", // 数据项名称, 比如pie系列 tooltip 需要用到
            //     // ....
            //     // ....
            //   },
            //   {
            //     value: 20,
            //     name: "羊毛衫",
            //   },
            //   {
            //     value: 36,
            //     name: "雪纺衫",
            //   },
            //   {
            //     value: 10,
            //     name: "裤子",
            //   },
            //   {
            //     value: 10,
            //     name: "高跟鞋",
            //   },
            //   {
            //     value: 20,
            //     name: "袜子",
            //   },
            // ],
                    

            // 方式四
            // data: [
            //   {
            //     value: [0, 5], // 数组第一项为x轴值，第二项为y轴值
            //     name: "衬衫", // 数据项名称, 比如pie系列 tooltip 需要用到
            //   },
            //   {
            //     value: [1, 20],
            //     name: "羊毛衫",
            //   },
            //   {
            //     value: [2, 36],
            //     name: "雪纺衫",
            //   },
            //   {
            //     value: [3, 10],
            //     name: "裤子",
            //   },
            //   {
            //     value: [4, 10],
            //     name: "高跟鞋",
            //   },
            //   {
            //     value: [5, 20],
            //     name: "袜子",
            //   },
            // ],


            // 方式五(地理坐标系推荐)
                data: [
              {
                value: [0, 5, 500], // 第一项为x轴或纬度值，第二项为y或维度轴值，第三项以后为扩展值
                name: "衬衫", // 数据项名称, 比如pie系列 tooltip 需要用到
              },
              {
                value: [1, 20, 400],
                name: "羊毛衫",
              },
              {
                value: [2, 36, 200],
                name: "雪纺衫",
              },
              {
                value: [3, 10, 100],
                name: "裤子",
              },
              {
                value: [4, 10, 600],
                name: "高跟鞋",
              },
              {
                value: [5, 20, 300],
                name: "袜子",
              },
            ],
          }
        ]
      };
      myChart.setOption(option);
    }
  </script>
</body>
</html>

    五.一 ECharts-series-系列图label的柱子内部的显示 data展示的方式一:

    image.png

    五.二 ECharts-series-系列图-data展示的方式二 (此时是二维数组,展示的方式和上面的就完全不一样了)

    此时展示的方式就是: 当二维数组中的第一项 代表的是 索引值, 第二项代表的是 数据

    image.png

    五.三 ECharts-series-系列图-data展示的方式三:

    image.png

    五.四 ECharts-series-系列图-data展示的方式四:

    image.png

    五.四 ECharts-series-系列图-data展示的方式五:

    image.png

    五.五 ECharts-series-系列图-type 属性的使用-- 柱状图(只需要配置type: 'bar')

    image.png

    五.六 ECharts-series-系列图-type 属性的使用-- 直线图(只需要配置type: 'line')

    image.png

    五.七 ECharts-series-系列图-type 属性的使用-- 散点图(只需要配置type: 'scatter')

    image.png

    五.七 ECharts-series-系列图-type 属性的使用-- 饼图(只需要配置type: 'pic')

    image.png

    此时的饼图的数据要改为这种结构的才会把疏导线展示出来:[ { value: 5,name: '衬衫' } ]

    image.png

    五.八 ECharts-series-系列图-label 属性的使用

    image.png

    五.九 ECharts-series-系列图-itemStyle属性的使用(指定每一项的颜色设置)

    image.png

    PS: 注意:


    image.png

    五.九 ECharts-series-系列图-emphasis 属性的使用(鼠标悬浮到图形元素上时,高亮的样式)

    image.png

    ps:

    image.png

    五. 十 ECharts-title-标题组件

    image.png 
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <div id="main" style="height: 400px"></div>
  <script src="../libs/echarts-5.3.3.js"></script>
  <script>
    window.onload = function() {
      let myChart = echarts.init(document.getElementById('main'));
      let option = {
        backgroundColor: 'rgba(255, 0, 0, 0.1)',
        grid: {
          show: true,
          backgroundColor: 'rgba(0, 255, 0, 0.1)',
        },

        title: {
          show: true,
          text: "Echart 5 条形图",
          left: 20,
          top: 10,
          // subtext: '第二个标题'
          // ....
        },
              

        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: "产品销量柱形图",
            type: "bar",
 
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
      myChart.setOption(option);
    }
  </script>
</body>
</html>

    五.十一 ECharts-legend-图例组件

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <div id="main" style="height: 400px"></div>
  <script src="../libs/echarts-5.3.3.js"></script>
  <script>
    window.onload = function() {
      let myChart = echarts.init(document.getElementById('main'));
      let option = {
        backgroundColor: 'rgba(255, 0, 0, 0.1)',
        grid: {
          show: true,
          backgroundColor: 'rgba(0, 255, 0, 0.1)',
        },
        legend: {
          show: true,
          // width: 100,
          // itemWidth: 20
          icon: 'circle',  // round circle ...

          // formatter: 'liu-{name}'
          formatter: function(name) {
            console.log(name)
            // 富文本的语法: {style_name|content}
            return name + '{percentageStyle| 40%}'
          },
          textStyle: {
            rich: { // 给富文本添加样式
              percentageStyle: {
                color: 'red',
                fontSize: 12
                // css 样式
              }
            }
          }

        },
        xAxis: {
          show: false,
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            type: 'pie', // line bar scatter pie
            label: { 
              show: true
            },
   
            // 方式三(推荐)
            data: [
              {
                value: 5,
                name: "衬衫", // 数据项名称, 比如pie系列 tooltip 需要用到
              },
              {
                value: 20,
                name: "羊毛衫",
              },
              {
                value: 36,
                name: "雪纺衫",
              },
              {
                value: 10,
                name: "裤子",
              },
              {
                value: 10,
                name: "高跟鞋",
              },
              {
                value: 20,
                name: "袜子",
              },
            ],
                 

          }
        ]
      };
      myChart.setOption(option);
    }
  </script>
</body>
</html>

    实际截图

    image.png

    五.十二 ECharts-legend-修改legend的样式

    image.png

    五.十二 ECharts-legend-修改legend的中的文字 -- 字符串的写法:

    image.png

    五.十二 ECharts-legend-修改legend的中的文字 -- 函数的写法 的写法:

    image.png

    五.十三 ECharts-legend-修改legend的中的文字 -- 函数的写法 的写法 + 换行:

    image.png

    五.十四 ECharts-legend-修改legend的中的自定义的数据样式

    image.png

    五.十五 ECharts-tooltip-提示框组件 tootip默认是不显示的,所以要设置tootip中的show属性为true

    image.png

    五.十六 ECharts-tooltip-提示框组件 tootip的相关配置

    image.png

    五.十七 ECharts-图形-渐变色

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="main" style="height: 400px; height: 400px"></div>
    <script src="../libs/echarts-5.3.3.js"></script>
    <script>
      window.onload = function () {
        let myChart = echarts.init(document.getElementById("main"));
        let option = {
          backgroundColor: "rgba(255, 0, 0, 0.1)",
          grid: {
            show: true,
            backgroundColor: "rgba(0, 255, 0, 0.1)",
          },

          tooltip: {
            show: true,
            // 使用了 trigger ，一般也结合 axisPointer
            trigger: "axis", // 默认是 item
            axisPointer: {
              type: "shadow", //  (默认是竖线 line)  (横线 + 竖线 cross)  (横线 + 竖线 shadow)
            },
            // formatter: '<div style="color:red">haha</div>'
          },

          xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          },
          yAxis: {},
          series: [
           #  这个是全局的壮图的配置
            {
              type: "bar",
              // 图形的颜色
              itemStyle: {
                color: {
                  // 渐变
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "red",
                    },
                    {
                      offset: 1,
                      color: "blue",
                    },
                  ],
                },
              },
              data: [
               # 这个是单个的item配置颜色
                {
                  value: 5,
                  name: "衬衫", // 数据项名称, 比如pie系列 tooltip 需要用到
                  // 图形的颜色
                  itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "#20FF89",
                        },
                        {
                          offset: 1,
                          color: "rgba(255, 255, 255, 0)",
                        },
                      ],
                      false
                    ),
                  },
                },
                {
                  value: 20,
                  name: "羊毛衫",
                },
                {
                  value: 36,
                  name: "雪纺衫",
                },
                {
                  value: 10,
                  name: "裤子",
                },
                {
                  value: 10,
                  name: "高跟鞋",
                },
                {
                  value: 20,
                  name: "袜子",
                },
              ],
            },
          ],
        };
        myChart.setOption(option);
      };
    </script>
  </body>
</html>

    实际截图

    image.png

    六.饼图的配置 (所有代码如下):

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <div id="main" style="height: 400px"></div>
  <script src="../libs/echarts-5.3.3.js"></script>
  <script>
    window.onload = function() {
      let myChart = echarts.init(document.getElementById('main'));
      let option = {
        backgroundColor: 'rgba(255, 0, 0, 0.1)',
        grid: {
          show: true,
          backgroundColor: 'rgba(0, 255, 0, 0.1)',
        },
        
        xAxis: {
          show: false,
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            type: 'pie', // line bar scatter pie
            label: { 
              show: true
            },
          // 设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。
          // center: ["50%", "50%"], // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
            
            // 百分比是参照容器高宽中较小一项( 感觉是直径 )
            radius: ["0%", "80%"], // 饼图的半径。数组的第一项是内半径，第二项是外半径。
            roseType: "area", //area玫瑰图(南丁格尔图)。 圆心角一样，通过半径展现数据大小(默认false)


            // 方式三(推荐)
            data: [
              {
                value: 5,
                name: "衬衫", // 数据项名称, 比如pie系列 tooltip 需要用到
              },
              {
                value: 20,
                name: "羊毛衫",
              },
              {
                value: 36,
                name: "雪纺衫",
              },
              {
                value: 10,
                name: "裤子",
              },
              {
                value: 10,
                name: "高跟鞋",
              },
              {
                value: 20,
                name: "袜子",
              },
            ],
          }
        ]
      };
      myChart.setOption(option);
    }
  </script>
</body>
</html>

    六.一 ECharts-series-系列图-center 属性的使用--饼图

    image.png

    六.二 ECharts-series-系列图-radius 属性的使用--饼图

    image.png

    六.三 ECharts-series-系列图-roseType属性的使用--饼图

    image.png

    相关文章

      网友评论

          本文标题：Echarts-详细配置-功能升级 (五)

          本文链接：https://www.haomeiwen.com/subject/jccxqdtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|Echarts-详细配置-功能升级 (五)|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！