Echarts入门----Echarts初学保姆版（老泪纵横）下载使用教程附画图实例

最新推荐文章于 2024-06-28 18:13:57 发布

琪~♪ ♬ ♪

最新推荐文章于 2024-06-28 18:13:57 发布

阅读量2.5w

点赞数 17

文章标签： Echarts 小白可视化

本文链接：https://blog.csdn.net/weixin_43831576/article/details/84582424

版权

Echarts入门----Echarts初学保姆版（老泪纵横）下载使用教程附画图实例

一、echarts介绍

ECharts是由百度团队开发的，可高度个性化定制的数据可视化图表库。它的底层依赖轻量级的Canvas类库ZRender，是一个纯JavaScript的图标库，兼容（IE8/9/10/11，Chrome，Firefox，Safari等）主流浏览器，可以运行在PC和移动设备上。可以直接使用Echarts绘图（一开始看的教程太复杂导致我放弃了），也可以从R调用Echarts（R我会一点点），package为REmap，
语句为：
install.packages(‘devtools’)
devtools::install_github(‘lchiffon/REmap’)
library(REmap)
或者安装过devtools代码如下：
library(devtools)
install_github(‘lchiffon/REmap’)
--------然鹅我搞了一下午都安装失败　报错：　Error in read.dcf(path) : 在记录开始的地方’ interactive map …'不能有连续行------新报错，我认为不是我的问题！

二、echarts使用

就是想画个图，发现网上各种教程把这个软件搞得很复杂，救救孩子吧！答应老板了只能继续研究！！所以从直接使用Echarts绘图方向入手QAQ！！最后感谢博主@Echarts学习2_Echarts入门(零基础小白教程)让我终于画出了图！！！！！！总结了一下，献给和我一样0基础的小白！！！！

第一步：下载ECharts 下载ECharts. 下载完整版（我之前选的下载源代码我也不知道我在想啥）下载到一个你可以找到的地方，先放着！！！！不用打开！！！！
如图（放着）: 在这里插入图片描述

第二步：写HTML文件，问题来了，如何编辑HTML文件？？？？之前编写HTML文件是新建txt格式的文件写好后保存为html格式，为了大家少走弯路，来我们专业一点，下载一个HTML编辑器下载Dreamweaver8 破解版.
激活序列号：
Dreamweaver8破解版序列号

WPD800-59139-91432-25145

WPD800-57931-76932-54523

WPD800-59931-32632-81939

WPD800-55533-57232-82308

WPD800-51139-95632-31627-----我用的这个

在安装的过程中，输入以上序列号就可以了，如果不成功多换几个试试。

下载好了点开编辑器新建文件如下图，点击代码复制粘贴：
在这里插入图片描述

复制代码：

<!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>

保存在你存放echarts.min.js的目录下，如图：
在这里插入图片描述
为什么非要下载Dreamweaver原因来了，因为直接由txt修改来的html文件不能选择UTF-8格式，导致中文乱码，一开始的乱码图如下：

所以在Dreamweaver里编辑保存前，可以点击修改---->页面属性---->标题/编码选择UTF-8格式
在这里插入图片描述
然后保存在echarts.min.js的目录下
再点开运行！！！见证奇迹的时刻~~~~~

参考链接鸣谢！！！！！

琪~♪ ♬ ♪

关注

17
点赞
踩
93

收藏

觉得还不错? 一键收藏
7
评论
Echarts入门----Echarts初学保姆版（老泪纵横）下载使用教程附画图实例

Echarts入门----Echarts初学保姆版（老泪纵横）下载使用教程附画图实例一、echarts介绍ECharts是由百度团队开发的，可高度个性化定制的数据可视化图表库。它的底层依赖轻量级的Canvas类库ZRender，是一个纯JavaScript的图标库，兼容（IE8/9/10/11，Chrome，Firefox，Safari等）主流浏览器，可以运行在PC和移动设备上。可以直接使用E...
复制链接

扫一扫