echarts数据可视化

简介

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

丰富的可视化类型

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

快速上手echarts

引入echarts

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECHARTS</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.6.0/dist/echarts.js"></script>
</head>

绘制一个简单图表

<!-- 柱形图 -->
<body>
  <div id="bar-01" style="width: 400px;height: 300px;">
  </div>
  <script type="text/javascript">
    var barCahrt = echarts.init(document.getElementById('bar-01'));
    var option1 = {
            title: {
                text: "第一个柱形图"
            },
            tooltip: {},
            legend: {
                data: ["销量"],
            },
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
            },
            yAxis: {
            },

            series: {
                name: "销量",
                type: "bar",
                data: [
                    5, 20, 36, 10, 10, 20
                ],
            },
      };     
    
  </script>
  
</body>

<div id="pie-01" style="width: 400px;height: 300px;"></div>
<script type="text/javascript">
  var pieChart = echarts.init(document.getElementById("pie-01"));
  //饼图数据
        var option2 = {
            title: {
                text: "第一个饼图"
            },
            tooltip: {},
            legend: {
                data: ["A", "B", "C"],
            },
            series: {
                type: "pie",
                data: [
                    { name: "A", value: 1231 },
                    { name: "B", value: 2323 },
                    { name: "C", value: 1919 },
                ],
            },
        };

</script>

<div id="line-01" style="width: 400px;height: 300px;"></div>
<script>
  var lineChart = echarts.init(document.getElementById("line-01"));
  //折线图数据
        var option3 = {
            title: {
                text: "第一个折线图",
            },
            tooltip: {},
            legend: {
                data: ["数量"],
            },
            toolbox: {
                feature: {
                    dataView: {},
                    saveAsImage: {
                        pixelRadio: 2,
                    },
                    restore: {},
                },
            },
            xAxis: {
            },
            yAxis: {
            },
            series: [{
                type: "line",
                smooth: true,
                name: ["数量"],
                data: [
                    [12, 5],
                    [24, 20],
                    [36, 36],
                    [48, 10],
                    [60, 10],
                    [72, 20]
                ],
            }],
        };

</script>

About ME

👋 读书城南，🤔 在未来面前，我们都是孩子～
  • 📙 一个热衷于探索学习新方向、新事物的智能产品经理，闲暇时间喜欢coding💻、画图🎨、音乐🎵、学习ing~
👋 Social Media
👋 加入小组~

👋 感谢打赏~