Echarts入门

2024-06-15 06:24| 来源: 网络整理| 查看: 265

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-----我用的这个

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

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

复制代码：

ECharts // 基于准备好的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);

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

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

参考链接鸣谢！！！！！

【本文地址】

Echarts入门

Echarts入门

今日新闻

推荐新闻