使用echarts(可视化图表库)

一:echarts

1.简介

一个基于 JavaScript 的开源可视化图表库

echarts官网使用教程: https://echarts.apache.org/zh/index.html

2.echars的使用导入CDN

CDN网站:https://cdn.baomitu.com/echarts

1.导入echars的CDN标签

# 标签

<script src="https://lib.baomitu.com/echarts/5.1.2/echarts.min.js"></script>

3.绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子之后，添加：

<body>

  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->

  <div id="main" style="width: 600px;height:400px;"></div>

</body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://lib.baomitu.com/echarts/5.1.2/echarts.min.js"></script>

</head>

<body>

    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->

    <div id="main" style="width: 100%;height:800px;"></div>

</body>

<script>

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据

      option = {

      title: {

        text: 'Referer of a Website',

        subtext: 'Fake Data',

        left: 'center'

      },

      tooltip: {

        trigger: 'item'

      },

      legend: {

        orient: 'vertical',

        left: 'left'

      },

      series: [

        {

          name: 'Access From',

          type: 'pie',

          radius: '50%',

          data: [

            { value: 1048, name: 'Search Engine' },

            { value: 735, name: 'Direct' },

            { value: 580, name: 'Email' },

            { value: 484, name: 'Union Ads' },

            { value: 300, name: 'Video Ads' }

          ],

          emphasis: {

            itemStyle: {

              shadowBlur: 10,

              shadowOffsetX: 0,

              shadowColor: 'rgba(0, 0, 0, 0.5)'

            }

          }

        }

      ]

    };

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

</script>

</html>

巴特西

使用echarts(可视化图表库)

一:echarts

1.简介

2.echars的使用导入CDN

3.绘制一个简单的图表

最新文章

热门文章