Echarts学习笔记

最新推荐文章于 2022-04-13 10:34:39 发布

笼中小夜莺

最新推荐文章于 2022-04-13 10:34:39 发布

阅读量443

点赞数

分类专栏：大前端与可视化文章标签：可视化数据可视化 echarts

本文链接：https://blog.csdn.net/m0_46521785/article/details/113197938

版权

大前端与可视化专栏收录该内容

15 篇文章 1 订阅

订阅专栏

开始学习echarts了

官方实例网站：https://echarts.apache.org/examples/zh/index.html

官方社区（很多比u特否的图形）：https://www.makeapie.com/explore.html#sort=rank_{timeframe=all}author=all

第三方实例网站：http://img.9cfcf.com/

视频地址：https://www.bilibili.com/video/BV1v7411R7mp

常见的数据可视化库：

D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)
ECharts.js 百度出品的一个开源 Javascript 数据可视化库
Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用
AntV 蚂蚁金服全新一代数据可视化解决方案等等
Highcharts 和 Echarts 就像是 Office 和 WPS 的关系

基础步骤

需要下载js文件，或者是在head标签引入js链接

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.js"></script>

准备一个具有大小的DOM容器

初始化echarts对象

指定配置项和数据

将配置项给echarts实例对象

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

常见配置项

series
- 系列列表。每个系列通过 type 决定自己的图表类型
- 大白话：图标数据，指定什么类型的图标，可以多个图表重叠。
xAxis：直角坐标系 grid 中的 x 轴
- boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
yAxis：直角坐标系 grid 中的 y 轴
grid：直角坐标系内绘图网格。
title：标题组件
tooltip：提示框组件
legend：图例组件
color：调色盘颜色列表

数据堆叠，同个类目轴上系列配置相同的stack值后后一个系列的值会在前一个系列的值上相加。

各个配置项详细说明总结可以去官网：

https://echarts.apache.org/zh/option.html#title

option = {
    // color设置我们线条的颜色 注意后面是个数组
    color: ['pink', 'red', 'green', 'skyblue'],
    // 设置图表的标题
    title: {
        text: '折线图堆叠123'
    },
    // 图表的提示框组件 
    tooltip: {
        // 触发方式
        trigger: 'axis'
    },
    // 图例组件
    legend: {
       // series里面有了 name值则 legend里面的data可以删掉
    },
    // 网格配置  grid可以控制线形图 柱状图 图表大小
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        // 是否显示刻度标签 如果是true 就显示 否则反之
        containLabel: true
    },
    // 工具箱组件  可以另存为图片等功能
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    // 设置x轴的相关配置
    xAxis: {
        type: 'category',
        // 是否让我们的线条和坐标轴有缝隙
        boundaryGap: false,
        data: ['星期一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
     // 设置y轴的相关配置
    yAxis: {
        type: 'value'
    },
    // 系列图表配置 它决定着显示那种类型的图表
    series: [
        {
            name: '邮件营销',
            type: 'line',
           
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '联盟广告',
            type: 'line',

            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '视频广告',
            type: 'line',
          
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: '直接访问',
            type: 'line',
          
            data: [320, 332, 301, 334, 390, 330, 320]
        }
    ]
};

美化的配置项

修改图表大小

color: ["#2f89cf"],
grid: {
    left: "0%",
    top: "10px",
    right: "0%",
	bottom: "4%",
    show: true,// 显示边框
    borderColor: '#012f4a',// 边框颜色
	containLabel: true//表示上面的距离是否把标签包含在内
},

X轴相关设置 xAxis

//不显示x轴 
xAxis: {
    show: false
},
// 设置x轴标签文字样式
// x轴的文字颜色和大小
axisLabel: {
    color: "rgba(255,255,255,.6)",
	fontSize: "12"
},
//  x轴样式不显示
axisLine: {
    show: false
    // 如果想要设置单独的线条样式 
    // lineStyle: {
	// color: "rgba(255,255,255,.1)",
    // width: 1,
    // type: "solid"
    }
}

Y 轴相关定制

   // y 轴文字标签样式
   axisLabel: {
       color: "rgba(255,255,255,.6)",//设置文字颜色
       fontSize: "12"
   },
    // y轴线条样式
    axisLine: {
        show: false//不显示y轴线条
         lineStyle: {
            color: "rgba(255,255,255,.1)",
            // width: 1,
            // type: "solid"
         }
   5232},
    // 不显示刻度
axisTick: {
   show: false
},
    // y 轴分隔线样式
   splitLine: {
       lineStyle: {
          color: "rgba(255,255,255,.1)"
        }
   }

图例的相关配置

 legend: {
      // 距离底部为0%
      bottom: "0%",
      // 小图标的宽度和高度
      itemWidth: 10,
      itemHeight: 10,
      data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
      // 修改图例组件的文字为 12px
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "12"
      }
 },

柱形为圆角以及柱子宽度

   series: [
         {
           name: "直接访问",
           type: "bar",
             // 柱子之间的距离
barCategoryGap: 50,
           // 修改柱子宽度
           barWidth: "35%",
           data: [10, 52, 200, 334, 390, 330, 220],
           itemStyle: {
             // 修改柱子圆角
             barBorderRadius: 5
           }
         }
       ]
     };

设置第一组柱子内百分比显示数据

// 图形上的文本标签
label: {
    normal: {
         show: true,
         // 图形内显示
         position: "inside",
         // 文字的显示格式
         formatter: "{c}%"
     }
},

柱状图每根都设置不同颜色

// 声明颜色数组
var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
// 2. 给 itemStyle  里面的color 属性设置一个 返回值函数
  itemStyle: {
          normal: {
            barBorderRadius: 20,  
            // params 传进来的是柱子对象
            console.log(params);
            // dataIndex 是当前柱子的索引号
            return myColor[params.dataIndex];
          }
         
},

取消柱状图的柱子颜色、设置边框颜色

itemStyle: {
            color: "none",//取消颜色
            borderColor: "#00c1de",//设置边框颜色
            borderWidth: 3,
            barBorderRadius: 15
        }

设置两条y轴/修改两条y轴

yaxis:[
	{
	
	},//左侧那条
	{
	
	}//右侧那条
]

实现一根柱状图压着另外一根

先配置好yaxis，然后再

// 给series  第二个对象里面的 添加 
yAxisIndex: 1,

数组中的数据传过来翻转了

//在yAxis中添加
inverse:true

图片下载按钮

加上这段代码，添加工具箱

toolbox: {
	feature: {
	saveAsImage: {}
	}
},

修改线的字体样式和颜色

series中对象添加

        lineStyle: {
            color: "#0184d5",
            width: 2 
        },

堆叠图实现渐变颜色

series中对象添加

areaStyle: {
              // 渐变色，只需要复制即可
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(1, 132, 213, 0.4)"   // 渐变色的起始颜色
                },
                {
                  offset: 0.8,
                  color: "rgba(1, 132, 213, 0.1)"   // 渐变线的结束颜色
                }
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)"//添加影子效果
        },

设置拐点的效果

        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 5,
        // 设置拐点颜色以及边框
         itemStyle: {
            color: "#00d887",
            borderColor: "rgba(221, 220, 107, .1)",
            borderWidth: 12
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,

修改饼状图的字体大小

series: [
      {
        name: "面积模式",
        type: "pie",
        radius: [30, 110],
        center: ["50%", "50%"],
        roseType: "radius",
        // 文本标签控制饼形图文字的相关样式， 注意它是一个对象
        label: {
          fontSize: 10
        },
      }
    ]
  };

修改玫瑰图的引导线长度

+        // 文字调整
+        label:{
+          fontSize: 10
+        },
+        // 引导线调整
+        labelLine: {
+          // 连接扇形图线长
+          length: 6,
+          // 连接文字线长
+          length2: 8
+        } 
+      }
+    ],

中国地图前面的数值

那是经纬度，我们看到的地图都是通过点构成的

使用中国地图

一定要先下载china.js文件才可以

修改中国地图省份的颜色

    geo: {
      map: 'china',
      zoom: 1.2,
      label: {
        emphasis: {
          show: false
        }
      },
      roam: false,
      itemStyle: {
        normal: {
          areaColor: '#142957',
          borderColor: '#0692a4'
        },
        emphasis: {
          areaColor: '#0b1c2d'
        }
      }
    },

将中国地图放大/缩小

通过 zoom 设置为1.2即可，看上一个文档实例

柱状图实例

为了防止多个图表的变量有污染，我们把js放在一个单独的文件，再使用立即执行函数的形式进行处理，格式如下

// 柱状图模块1
(function() {
    // 1实例化对象
    var myChart = echarts.init(document.querySelector(".bar .chart"));
    // 2. 指定配置项和数据
    var option = {};
    // 3. 把配置项给实例对象
    myChart.setOption(option);
    // 4. 让图表跟随屏幕自动的去适应
    window.addEventListener("resize", function() {
        myChart.resize();
    });
})();

让图表跟随屏幕自动的去适应

//js代码添加这几行
window.addEventListener("resize", function() {
    myChart.resize();
});

修改lenged颜色和位置

 // 图例组件
    legend: {
      textStyle: {
        color: '#4c9bfd' // 图例文字颜色
      },
      right: '10%' // 距离右边10%，必须加引号
    },

修改折线图的颜色

通opintion的color进行修改

将折线图变圆滑

series 在折线图的数据中添加 smooth 为 true

lenged消失了

如果series中对象有了name值，lenged的data属性就不用写了

添加两个a标签，做到分年份制图

开发的时候，将数据使用ajax传输，然后将data值进行替换即可

引入jquery.js

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

创建假数据

 var yearData = [
      {
        year: '2020',  // 年份
        data: [  // 两个数组是因为有两条线
             [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
             [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
          ]
      },
      {
        year: '2021',  // 年份
        data: [  // 两个数组是因为有两条线
             [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
     		[143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
          ]
      }
     ];

在funcation函数最下面添加下面代码

  // 5.点击切换效果
  $(".line h2").on("click", "a", function() {
    // alert(1);
    // console.log($(this).index());
    // 点击 a 之后 根据当前a的索引号 找到对应的 yearData的相关对象
    // console.log(yearData[$(this).index()]);
    var obj = yearData[$(this).index()];
    option.series[0].data = obj.data[0];
    option.series[1].data = obj.data[1];
    // 需要重新渲染
    myChart.setOption(option);
  });

笼中小夜莺

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
Echarts学习笔记

开始学习echarts了官方实例网站：https://echarts.apache.org/examples/zh/index.html官方社区（很多比u特否的图形）：https://www.makeapie.com/explore.html#sort=ranktimeframe=allauthor=all第三方实例网站：http://img.9cfcf.com/视频地址：https://www.bilibili.com/video/BV1v7411R7mp常见的数据可视化库：D3.js
复制链接

扫一扫