Echarts

最新推荐文章于 2023-05-15 16:11:46 发布

敢问

最新推荐文章于 2023-05-15 16:11:46 发布

阅读量119

点赞数

分类专栏： Node.js 文章标签： node.js

本文链接：https://blog.csdn.net/weixin_41040445/article/details/116590659

版权

Node.js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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

官网 https://echarts.apache.org/zh/index.html

echarts 已经提供了很多实例，根据实际的需求进行复制实例修改就可以了

安装 npm install –-save echarts
自学案例

随便找一个示例

点击进入

把当前的实例代码复制下来放到自己要使用的地方

根据配置手册进行学习

示例代码

<body>
  <!-- mian元素的作用就是现实图表的地方 -->
  <div id="main" style="width: 600px;height:400px;"></div>
  <script src="lib/echarts.min.js"></script>
  <script>
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    option = {
      tooltip: {
          trigger: 'item',
      },
      legend: {
          top: '5%',
          left: 'center'
      },
      series: [
              {
              name: '访问来源',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                  show: false,
                  position: 'center'
              },
              emphasis: {
                  label: {
                      show: true,
                      fontSize: '40',
                      fontWeight: 'bold'
                  }
              },
              labelLine: {
                  show: false
              },
              data: [
                  {value: 1048, name: '搜索引擎'},
                  {value: 735, name: '直接访问'},
                  {value: 580, name: '邮件营销'},
                  {value: 484, name: '联盟广告'},
                  {value: 300, name: '视频广告'}
              ]
            }
          ]
    };

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

展示效果

敢问

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echarts

echarts一个基于 JavaScript 的开源可视化图表库官网https://echarts.apache.org/zh/index.htmlecharts已经提供了很多实例，根据实际的需求进行复制实例修改就可以了安装npm install –-save echarts 自学案例随便找一个示例点击进入把当前的实例代码复制下来放到自己要使用的地方根据配置手册进行学习示例代码<body> <!-- mian元素...
复制链接

扫一扫