来了老弟，数据图表- echarts

最新推荐文章于 2023-03-10 11:28:26 发布

小渝学长

最新推荐文章于 2023-03-10 11:28:26 发布

阅读量189

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/weixin_44548718/article/details/89076019

版权

js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

在编程中，我们在编写一些系统啊或某些页面会需要通过表格图表之类的来显示大概的数据（当然，也可以是具体的），而我们的echarts这个插件就是一些专门统计数据的盒型图插件！
你可以通过以下几种方式获取 echarts：

从echarts的官网下载界面选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载完整版本。

echarts 的 github 上下载最新的 release，解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。
通过 npm 获取 echarts，npm install echarts --save，详见在 webpack 中使用 echarts(http://echarts.baidu.com/tutorial.html#在 webpack 中使用 ECharts)
在这里插入图片描述
从上图中我们就能了解到这个插件是有很多种数据图的样式的（例：散点图、折线图、柱状图、地图、饼图……还有好多种，就不一一标明了，需要的boy自行去深入了解一下哈）
下面是一个简单的教程：

1.首先呢是把这个插件的所要用到文件引入进来（用别的插件也是一样，这是必要的）

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>盘他</title>
   <script src="~/Plugins/echarts/echarts.min.js"></script>//echarts插件的js文件的引入
 </head>
 <body>
</body>
</html>

2.然后再弄一个元素给它宽高

<body>
     <div id="PT" style="width:900px; height:800px;"></div>

</body>

3.然后就直接运用 echarts.init 方法去初始化一个echarts实例，然后通过setOption方法来让你的图表显示出来。下面用一个饼图来给大家看一下
下面是全部的代码（看到这还不会用的可具体参照一下下面的代码哈）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>盘他</title>
    <script src="~/Plugins/echarts/echarts.min.js"></script>
 </head>
 <body>
     <div id="PT" style="width:900px; height:800px;"></div>
    
     <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('PT'));
// 实例方法
option = {   
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            selectedMode: 'single',
            radius: [0, '30%'],

            label: {
                normal: {
                    position: 'inner'
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, name:'直达', selected:true},
                {value:679, name:'营销广告'},
                {value:1548, name:'搜索引擎'}
            ]
        },
        {
            name:'访问来源',
            type:'pie',
            radius: ['40%', '55%'],

            data:[
                {value:335, name:'直达'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1048, name:'百度'},
                {value:251, name:'谷歌'},
                {value:147, name:'必应'},
                {value:102, name:'其他'}
            ]
        }
    ]
};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
     </script>
</body>
</html>

更加具体的教程可下载文件之后到那个文档\教程里面去看，那里面有介绍与用法之类的（反正很细就是了）

（是时候了：乌拉巴哈）效果图如下
在这里插入图片描述

噢对了（这些图表多多少少都有那么一点动画的喔，比如缩放之类的）

最后说一句：这个插件是真香?

小渝学长

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
来了老弟，数据图表- echarts

开发工具与关键技术：VS/谷歌浏览器，实用小插件作者：江炳渝撰写时间：2019年4月6日在编程中，我们在编写一些系统啊或某些页面会需要通过表格图表之类的来显示大概的数据（当然，也可以是具体的），而我们的echarts这个插件就是一些专门统计数据的盒型图插件！你可以通过以下几种方式获取 echarts：从echarts的官网下载界面选择你需要的版本下载，根据开发者功能和体积上的需求，我...
复制链接

扫一扫