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>



数据可视化   echarts      数据可视化 echarts

本博客所有文章除特别声明外,均采用 CC BY-SA 3.0协议 。转载请注明出处!