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

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的目录下
再点开运行!!!见证奇迹的时刻~~~~~
在这里插入图片描述

参考链接鸣谢!!!!!

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页