ECharts使用

最新推荐文章于 2024-02-22 13:49:02 发布

菜鸟研究僧同学

最新推荐文章于 2024-02-22 13:49:02 发布

阅读量250

点赞数

文章标签：数据可视化

本文链接：https://blog.csdn.net/qq_40396380/article/details/104425578

版权

由于想要学习可视化，通过查找资料发现使用Echarts进行数据可视化是一个比较好的方式。
之后百度了一下知道echart是一个插件。Echarts是“开源”的，提供了创建多种多样的图表。包括折线图、坐标系、散点图等等之类的，这里就不一一列举了。大家可以Echart官网去查看
接下来简要说以下初始使用步骤：

在官网下载Echarts插件源代码（js文件）

可能你会犹豫按照那种方式下载哪个会比较好，接下来说说我自己踩过的坑：
最开始我下载的是最下面的Echarts GL 1.1.1源代码，但是在用该js文件画柱状图的时候，总是不能够显示出图形，后来通过查找资料发现，Echarts GL是ECchats的扩展版本，是用来画3d图形的，里面并不包含一般图形的js，所以一直显现不出来。若要绘制一般图形，如柱状图、扇形、折线图,可以选择方法三在线定制，出现以下画面，则表示下载完成，会得到一个echarts.min.js的文件。
将下载得到的echarts.min.js文件放在一个你能够找到的文件夹里面。
新建一个html文件，双击即可以显示图形。html可以直接用文本文件，修改后缀创建，但是这可能导致中文无法正常显示，我使用的是EditPlus软件，可以编写html文件。
实例一个柱形图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <!-- 这里是加载刚下好的echarts.min.js，注意路径 -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1000px;height:600px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        var option={
            backgroundColor: '#2c343c',
            textStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    data:[
                        {value:400, name:'搜索引擎'},
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:274, name:'联盟广告'},
                        {value:235, name:'视频广告'}
                    ],
                    roseType: 'angle',
 
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 200,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    label: {
                        normal: {
                            textStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            }
                        }
                    }
 
                }
            ]
        }
 
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
 
    </script>
</body>
</html>

注意：
若是实现普通图形，则html文件中引入普通echarts.min.js就可以了。
若想要实现三维图形，则要下载扩展三维js文件，引入文件除了echarts.min.js，还有扩展三维js文件。

菜鸟研究僧同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ECharts使用

由于想要学习可视化，通过查找资料发现使用Echarts进行数据可视化是一个比较好的方式。之后百度了一下知道echart是一个插件。Echarts是“开源”的，提供了创建多种多样的图表。包括折线图、坐标系、散点图等等之类的，这里就不一一列举了。大家可以Echart官网去查看接下来简要说以下初始使用步骤：在官网下载Echarts插件源代码（js文件）可能你会犹豫按照那种方式下载哪个会比较好...
复制链接

扫一扫