Echarts 年前又上线V5.0版本，赶紧学起来

新旧版本对比：个人感觉新版本Echarts 更加好看点击图表也加入动画效果细节满分
相对于旧版本简直一个天上（高大上更炫酷）一个地下（low货） !

前言

提示：V5.0版本也是刚刚更新博主也是一边看文档一边学习，如果有写得不对的地方请指正

一、echarts是什么？

解释：echarts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。

二、使用步骤

1.JS引入

代码如下（示例）：

2.页面布局

代码如下（示例）：

3.数据绑定

 var mychart={//通用属性提取，方便接口交互与后期维护；做到数据与视图层相分离。color:'#57617B',xlist: ['计算器', '笔记本', 'ipad', '华为', '魅族', '小米', '苹果'],ylist:[820, 932, 901, 934, 1290, 1330, 1320],yname:"价值",xname:"类型",titlename:"折线图"
};
var option = {title:{//图表标题text:mychart.titlename},grid: {//设置图表位置left: '3%', right: '8%', bottom: '3%', containLabel: true},xAxis: {type: 'category',boundaryGap:false,name:mychart.xname,//x轴内容axisLine: {lineStyle: {color: mychart.color}},axisLabel: {textStyle: {color:mychart.color}},data: mychart.xlist //X轴数据},tooltip : {//图表悬浮提示框trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985'}}},yAxis: {type: 'value',name:mychart.yname  //y轴内容  },series: [{data: mychart.ylist, //y轴数据type: 'line',smooth: true
};
var myChart = echarts.init(document.getElementById('main'));//将main初始化到echarts
myChart.setOption(option);//渲染数据

三、项目截图

四、上才（源）艺（码）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Echarts进阶篇</title><style>.item{width:1220px;height:100%;margin:0 auto;}.box{width:600px;height:400px;position: relative;display: inline-block;}.ms-controller{visibility: hidden;}</style>
</head>
<body><div class="content ms-controller" ms-controller="Echarts"><h1>{{name}}</h1><div class="item"><div id="main" class="box"></div><div id="main2" class="box"></div><div id="main3" class="box"></div></div></div>
</body>
<script src="js/jquery-1.11.2.min.js"></script>
<!-- 引入最新版本Echarts V5.0版本 -->
<script src="js/echarts.min5.0.js"></script>
<script src="js/avalon1.47.js"></script>
<script>var tempindex=avalon.define({$id:"Echarts",name:"Echarts进阶篇",ctData:[],getList:function(){tempindex.getMyChart();tempindex.getMyChart2();tempindex.getMyChart3();},getMyChart:function(){var mychart={//通用属性提取，方便接口交互与后期维护；做到数据与视图层相分离。color:'#57617B',xlist: ['计算器', '笔记本', 'ipad', '华为', '魅族', '小米', '苹果'],ylist:[820, 932, 901, 934, 1290, 1330, 1320],yname:"价值",xname:"类型",titlename:"折线图"};var option = {title:{//图表标题text:mychart.titlename},grid: {//设置图表位置left: '3%', right: '8%', bottom: '3%', containLabel: true},xAxis: {type: 'category',boundaryGap:false,name:mychart.xname,//x轴内容axisLine: {lineStyle: {color: mychart.color}},axisLabel: {textStyle: {color:mychart.color}},data: mychart.xlist},tooltip : {//图表悬浮提示框trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985'}}},yAxis: {type: 'value',name:mychart.yname//y轴内容},series: [{data: mychart.ylist,type: 'line',smooth: true}]};var myChart = echarts.init(document.getElementById('main'));//将main初始化到echartsmyChart.setOption(option);//渲染数据},getMyChart2:function(){var mychart2={color:'#57617B',xlist: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],ylist:[10, 52, 200, 334, 390, 330, 220],yname:"空气湿度",xname:"星期",titleName:"柱状图",popupName:"直接访问"};var option2 ={title:{text:mychart2.titleName},tooltip: {trigger: 'axis',axisPointer: {            // 坐标轴指示器，坐标轴触发有效type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'}},grid: {left: '3%',right: '8%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',name:mychart2.xname,data: mychart2.xlist,axisTick: {alignWithLabel: true}}],yAxis: [{type: 'value',name:mychart2.yname}],series: [{name: mychart2.popupName,type: 'bar',barWidth: '60%',data: mychart2.ylist}]};var myChart2 = echarts.init(document.getElementById('main2'));myChart2.setOption(option2);},getMyChart3:function(){var option3 = {title:{text:"饼图"},tooltip: {trigger: 'item'},legend: {orient:'vertical',top: '10%',left:0},series: [{name: '访问来源',type: 'pie',radius: ['40%', '70%'],avoidLabelOverlap: false,itemStyle: {borderRadius: 10,borderColor: '#fff',borderWidth: 2},label: {show: false,position: 'center'},emphasis: {label: {show: true,fontSize: '30',fontWeight: 'bold'}},labelLine: {show: false},data: [{value: 1048, name: '搜索引擎'},{value: 735, name: '直接访问'},{value: 580, name: '邮件营销'},{value: 484, name: '联盟广告'},{value: 300, name: '视频广告'}]}]};var myChart3 = echarts.init(document.getElementById('main3'));myChart3.setOption(option3);}});avalon.ready(function(){tempindex.getList();})
</script>
</html>

写在最后

如果你觉得这篇文章写得不错或者对您有用的话请帮忙点赞加收藏，毕竟原创不易；如果您觉得文章有什么地方写得不对或者需要改进的地方，欢迎通过评论私聊博主！

Echarts V5.0版本学习相关推荐

cocos2d-x 3.0 版本学习笔记1
3.0版本的功能很强大,相对以前的版本改动也很大.现在来体验下3.0版本的.这里主要记录在学习中碰到的各种问题.体验版本:cocos2d-x-3.0beta2 特别说明:这个学习的过程主要是参照了 & ...
vue中echarts 5.0版本以上不支持因为官方移除了地图数据和map文件夹
解决方法: 1.安装4.9版本npm install echarts@4.9.0 2.自行导入js
RDIFramework.NET代码生成器全新V5.0版本发布
RDIFramework.NET代码生成器介绍 RDIFramework.NET代码生成器,代码.文档一键生成. RDIFramework.NET代码生成器集代码生成.各数据库对象文档生成.数据库常用 ...
数据驱动安全架构升级---“花瓶”模型迎来V5.0(二)
三."花瓶"模型V5.0 "花瓶"模型V5.0是从安全事件防护的角度,设计安全保障架构的.事前制定策略,部署防护措施,提高攻击门槛,阻断常规的入侵攻击:事中监控 ...
Canvas or SVG？一张好图，两手准备，就在 ECharts 4.0
Canvas 和 SVG 是两大基于浏览器的渲染方案,在选择图表库的时候,用户有时也会在这两者之间纠结.但是纠结的时候,你是否真的明白这两者在哪些方面有优劣? ECharts 4.0 推出 Canva ...
巨杉数据库 v5.0 Beta 正式发布！
2020年疫情的出现对众多企业运营造成了严重的影响.面对突发状况,巨杉利用长期积累的远程研发协作体系,仍然坚持进行技术创新,按照已有规划推进研发工作,正式推出了巨杉数据库(SequoiaDB) v5. ...
巨杉数据库v5.0携手迪思杰深化战略级合作
在国内外大环境的驱动下,国内金融科技领域正在不断地发展和变革.作为基础软件的数据库成为金融科技的发展基础,面对技术升级的需求和市场的变化,巨杉数据库v5.0版本通过跨引擎事务一致性.原生分布式金融级容 ...
震撼来袭！葡萄城商业智能报表软件Wyn Enterprise V5.0发布会前瞻，3大亮点抢先看
围绕数据分析与智能化技术的不断迭代创新,实现由传统BI向新型BI的转变! 我们都知道,随着信息化覆盖的场景越来越多,企业的数据变得更精细.更全面,并且由客户驱动,实时互动,不断迭代,紧密相连.现阶段, ...
全自动英文SEO站群系统 V5.0 发布
强大的全自动站群系统,什么是全自动,就是你根本无需采集内容,无限繁琐设置,新手也能很快上手的全新独立站群系统. 站群是由几个到几百个不等的网站组成,可以理解为一个人同时拥有很多网站,我们就叫站群. 通 ...

Echarts V5.0版本学习