-
ECharts介绍及使用方法
2018-08-23 12:54:37前面做项目时用到ECharts,今天特此整理一下,作为笔记,同时希望帮助更多人。 首先简单介绍一下,ECharts是一个纯JavaScript图表库,底层依赖于轻量级的Canvas类库ZRender,基于BSD开原协议,是一款非常优秀的可视...前面做项目时用到ECharts,今天特此整理一下,作为笔记,同时希望帮助更多人。
首先简单介绍一下,ECharts是一个纯JavaScript图表库,底层依赖于轻量级的Canvas类库ZRender,基于BSD开原协议,是一款非常优秀的可视化前端框架。
官网地址:http://echarts.baidu.com/
1.首先在官网 选择合适的下载版本
http://echarts.baidu.com/download.html
2.引入Echarts
<script src="js/echarts.js"></script>
3.绘制一个简单的图表
准备一个DOM容器
<div style="border:2px solid #666;width:49%;height:450px;float:left" id="chartmain"></div>
4.创建一个简单的雷达图
<script type="text/javascript"> window.onload = function (){ //指定图表的配置项和数据 option = { //标题 title: { text: '基础雷达图' }, tooltip: {}, legend: { data: ['预算分配(Allocated Budget)', '实际开销(Actual Spending)'] }, radar: { // shape: 'circle', name: { textStyle: { color: '#fff', backgroundColor: '#999', borderRadius: 3, padding: [3, 5] } }, indicator: [ { name: '销售(sales)', max: 6500}, { name: '管理(Administration)', max: 16000}, { name: '信息技术(Information Techology)', max: 30000}, { name: '客服(Customer Support)', max: 38000}, { name: '研发(Development)', max: 52000}, { name: '市场(Marketing)', max: 25000} ] }, series: [{ name: '预算 vs 开销(Budget vs spending)', type: 'radar', // areaStyle: {normal: {}}, data : [ { value : [4300, 10000, 28000, 35000, 50000, 19000], name : '预算分配(Allocated Budget)' }, { value : [5000, 14000, 28000, 31000, 42000, 21000], name : '实际开销(Actual Spending)' } ] }] }; //获取dom容器 var myChart = echarts.init(document.getElementById('chartmain')); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } </script>
这样一个简单的雷达图就ok了,下面看下效果图
5.动态的柱状图
(1)还是创建一个装ECharts的DOM容器
(2)后台返回数据
(3)前台JavaScript代码
<script type="text/javascript"> window.onload = function (){ //财务看年度的合同金额echart数据源 $.ajax({ url:'', type:'post', datatype:'json', success : function(data){ var partner = new Array();//公司名 for(var i=0;i<data.length;i++){ partner.push(data[i].partner); } var odata=[]; for(var i=0;i<data.length;i++){ var obj={}; obj.name=partner[i]; obj.type='bar'; obj.data=[data[i].qyearOne,data[i].qyearTwo,data[i].qyearThree,data[i].qyearFour,data[i].yearOne,data[i].yearTwo,data[i].yearThree,data[i].yearFour,data[i].hyearOne,data[i].hyearTwo,data[i].hyearThree,data[i].hyearFour]; obj.barWidth=30;//宽度 odata.push(obj); } option = { tooltip : { trigger: 'axis' }, legend: { data:partner }, toolbox: { show : true, }, calculable : true, xAxis : [{ type : 'category', data :[qyear+'Q1',qyear+'Q2',qyear+'Q3',qyear+'Q4',year+'Q1',year+'Q2',year+'Q3',year+'Q4',hyear+'Q1',hyear+'Q2',hyear+'Q3',hyear+'Q4'] }], yAxis : [{ type : 'value' }], series : odata //前台组装数据 }; //获取要赋值的DOM控件 var myChart = echarts.init(document.getElementById('chartmain')); //赋值 myChart.setOption(option); } }); </script>
这样一个前后台交互的柱状图就ok了,效果图如下。
以上就是本文的全部内容,希望对大家的学习有所帮助,欢迎评论交流。能get到知识点不要忘了关注点个赞~ 拒绝白嫖从我们做起hh~
-
Echarts图例位置 - legend属性
2019-06-14 16:54:27@如何设置Echarts图例位置 Echarts可以帮助我们快速构建柱状图、饼图、条形图,这对于多图形化展示数据来说尤其方便,可帮助我们快速开发。 不过我们在使用Echarts过程中经常会遇到如下问题:图例经常不知道如何调节...[如何设置Echarts图例位置]
Echarts可以帮助我们快速构建柱状图、饼图、条形图,这对于多图形化展示数据来说尤其方便,可帮助我们快速开发。
不过我们在使用Echarts过程中经常会遇到如下问题:图例经常不知道如何调节到我们想要的位置。
遇到此情况该如何调节呢?只需要legend属性中修改如下几个示数即可:
legend: { orient: 'vertical', x:'right', //可设定图例在左、右、居中 y:'center', //可设定图例在上、下、居中 padding:[0,50,0,0], //可设定图例[距上方距离,距右方距离,距下方距离,距左方距离] data: ['直接访问','微信','百度','其他文章','网页'] },
①x : 可以设定图例在----左(left)、右(right)、居中(center)、填写数字(如:100px)
②y : 可以设定图例在----上(top)、下(bottom)、居中(center)、填写数字(如:100px)
③另外,可使用padding:
padding:[0,50,0,0] [(距离上方距离),(距离右方距离)、(距离下方距离)、(距离左方距离)]
当前(2020年6月)直接只设置left、right、top、bottom具体像素值或百分比即可:left、right、top、bottom
legend: { orient: 'vertical', right: 10, //当前直接只设置此具体像素值、百分比即可了 data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] },
如此设置完就可以得到自己想要的位置啦。
参考:Echarts官网配置项介绍:https://echarts.apache.org/zh/option.html#legend
-
Echarts 柱形图最全详解
2018-04-15 00:11:47Echarts 柱形图Echarts 柱形图
echarts百度针对数据报表等展现的一个产品,具体了解看官方网站:Echarts官网,在这个官网中有详细教程以及API,很容易入手Echarts,从个人刚学习Echarts图表来看,它的难度在于它有自己的一套属性,这和我们平时用的css是不同的,因而我们需要什么效果就得去遵守它的属性,去识别图表的各个部分的专业名称,才能从它API中获取相应属性去实现你想要效果
下面从实现一个柱形图来体验下Echarts这个工具:
效果图:
对柱形图各部分分析:(重点)
实现:
根据柱形每个部分的专业名称去寻找官网中的配置项手册对应的属性,然后实现你需要的效果代码:
<!DOCTYPE html> <html> <head> <title>echarts</title> </head> <script src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/echarts.min.js"></script> <body style="background-color:#333;"><!-- --> <div id="_top" style="width:600px;height: 400px;margin-top:100px;margin-left: 300px;"> </div> </body> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('_top')); // 指定图表的配置项和数据 var option = { //-------------- 标题 title ---------------- title: { text: '主标题', textStyle:{ //---主标题内容样式 color:'#fff' }, subtext:'副标题', //---副标题内容样式 subtextStyle:{ color:'#bbb' }, padding:[0,0,100,100] //---标题位置,因为图形是是放在一个dom中,因此用padding属性来定位 }, //---------------- 图例 legend ----------------- legend: { type:'plain', //----图例类型,默认为'plain',当图例很多时可使用'scroll' top:'1%', //----图例相对容器位置,top\bottom\left\right selected:{ '销量':true, //----图例选择,图形加载出来会显示选择的图例,默认为true }, textStyle:{ //----图例内容样式 color:'#fff', //---所有图例的字体颜色 //backgroundColor:'black', //---所有图例的字体背景色 }, tooltip:{ //图例提示框,默认不显示 show:true, color:'red', }, data:[ //----图例内容 { name:'销量', icon:'circle', //----图例的外框样式 textStyle:{ color:'#fff', //----单独设置某一个图例的颜色 //backgroundColor:'black',//---单独设置某一个图例的字体背景色 } } ], }, //-------------- 提示框 ----------------- tooltip: { show:true, //---是否显示提示框,默认为true trigger:'item', //---数据项图形触发 axisPointer:{ //---指示样式 type:'shadow', axis:'auto', }, padding:5, textStyle:{ //---提示框内容样式 color:"#fff", }, }, //------------- grid区域 ---------------- grid:{ show:false, //---是否显示直角坐标系网格 top:80, //---相对位置,top\bottom\left\right containLabel:false, //---grid 区域是否包含坐标轴的刻度标签 tooltip:{ //---鼠标焦点放在图形上,产生的提示框 show:true, trigger:'item', //---触发类型 textStyle:{ color:'#666', }, } }, //------------- x轴 ------------------- xAxis: { show:true, //---是否显示 position:'bottom', //---x轴位置 offset:0, //---x轴相对于默认位置的偏移 type:'category', //---轴类型,默认'category' name:'月份', //---轴名称 nameLocation:'end', //---轴名称相对位置 nameTextStyle:{ //---坐标轴名称样式 color:"#fff", padding:[5,0,0,-5], //---坐标轴名称相对位置 }, nameGap:15, //---坐标轴名称与轴线之间的距离 //nameRotate:270, //---坐标轴名字旋转 axisLine:{ //---坐标轴 轴线 show:true, //---是否显示 //------------------- 箭头 ------------------------- symbol:['none', 'arrow'], //---是否显示轴线箭头 symbolSize:[8, 8] , //---箭头大小 symbolOffset:[0,7], //---箭头位置 //------------------- 线 ------------------------- lineStyle:{ color:'#fff', width:1, type:'solid', }, }, axisTick:{ //---坐标轴 刻度 show:true, //---是否显示 inside:true, //---是否朝内 lengt:3, //---长度 lineStyle:{ //color:'red', //---默认取轴线的颜色 width:1, type:'solid', }, }, axisLabel:{ //---坐标轴 标签 show:true, //---是否显示 inside:false, //---是否朝内 rotate:0, //---旋转角度 margin: 5, //---刻度标签与轴线之间的距离 //color:'red', //---默认取轴线的颜色 }, splitLine:{ //---grid 区域中的分隔线 show:false, //---是否显示,'category'类目轴不显示,此时我的X轴为类目轴,splitLine属性是无意义的 lineStyle:{ //color:'red', //width:1, //type:'solid', }, }, splitArea:{ //--网格区域 show:false, //---是否显示,默认false }, data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],//内容 }, //---------------------- y轴 ------------------------ yAxis: { show:true, //---是否显示 position:'left', //---y轴位置 offset:0, //---y轴相对于默认位置的偏移 type:'value', //---轴类型,默认'category' name:'销量', //---轴名称 nameLocation:'end', //---轴名称相对位置value nameTextStyle:{ //---坐标轴名称样式 color:"#fff", padding:[5,0,0,5], //---坐标轴名称相对位置 }, nameGap:15, //---坐标轴名称与轴线之间的距离 //nameRotate:270, //---坐标轴名字旋转 axisLine:{ //---坐标轴 轴线 show:true, //---是否显示 //------------------- 箭头 ------------------------- symbol:['none', 'arrow'], //---是否显示轴线箭头 symbolSize:[8, 8] , //---箭头大小 symbolOffset:[0,7], //---箭头位置 //------------------- 线 ------------------------- lineStyle:{ color:'#fff', width:1, type:'solid', }, }, axisTick:{ //---坐标轴 刻度 show:true, //---是否显示 inside:true, //---是否朝内 lengt:3, //---长度 lineStyle:{ //color:'red', //---默认取轴线的颜色 width:1, type:'solid', }, }, axisLabel:{ //---坐标轴 标签 show:true, //---是否显示 inside:false, //---是否朝内 rotate:0, //---旋转角度 margin: 8, //---刻度标签与轴线之间的距离 //color:'red', //---默认取轴线的颜色 }, splitLine:{ //---grid 区域中的分隔线 show:true, //---是否显示,'category'类目轴不显示,此时我的y轴为类目轴,splitLine属性是有意义的 lineStyle:{ color:'#666', width:1, type:'dashed', //---类型 }, }, splitArea:{ //--网格区域 show:false, //---是否显示,默认false } }, //------------ 内容数据 ----------------- series: [ { name: '销量', //---系列名称 type: 'bar', //---类型 legendHoverLink:true, //---是否启用图例 hover 时的联动高亮 label:{ //---图形上的文本标签 show:false, position:'insideTop', //---相对位置 rotate:0, //---旋转角度 color:'#eee', }, itemStyle:{ //---图形形状 color:'blue', barBorderRadius:[18,18,0,0], }, barWidth:'20', //---柱形宽度 barCategoryGap:'20%', //---柱形间距 data: [3020, 4800, 3600, 6050, 4320, 6200,5050,7200,4521,6700,8000,5020] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </html>
欢迎
关注CSDN Github 博客园 个人网站 此博客内容是本人在平时工作、学习中,写下这些小总结,其中内容多为初次接触,不能保证完全正确、最优,如有疑问或不足之处,望评论指出。谢谢! -
基于 Echarts 实现可视化数据大屏展示
2019-09-05 15:28:48收集了一套基于 Echarts 实现可视化数据大屏响应式展示效果的源码,共计30个页面,可以在此基础上重新开发。 实现方式:html + Echarts 贴图 有需要的可以联系我 暂时不开源,之后会考虑写教程和开源项目。 ...前言
收集了一套基于 Echarts 实现可视化数据大屏响应式展示效果的源码,共计30个页面,可以在此基础上重新开发。
实现方式:html + Echarts贴图
源码
好了好了,现在开源代码;
求源码的各位,码字不易,千万不要吝啬你们的Star和点赞评论哦~
github项目地址:基于 Echarts 实现可视化数据大屏展示
没有github的可去我的资源下载压缩包:echars模板.7z
另附近期整理的地图解析的博客:使用echarts完成中国省市区县镇地图展示;
如果本文对你有帮助的话,请不要忘记给我点赞留言打call哦(混个积分)~o( ̄▽ ̄)do
有其他问题留言 over~ -
Echarts 的grid各个参数的含义
2018-07-04 14:35:54见网址:http://echarts.baidu.com/doc/doc.html#Grid grid 为直角坐标系内绘图网格,可以设置 x y x2 y2 等值。这在控制图表摆放位置上,起了重要的作用。 如图所示, x 为直角坐标系内绘图网格左上角横坐标,... -
百度Echarts示例-echarts-demo
2013-11-29 10:18:16百度Echarts示例-echarts-demo 折线图 Line 饼状图 Pie 柱状图 Bar 中国地图 ChinaMap -
Echarts 如何调整 legend 和图表的间距
2017-05-16 11:30:30首先 加入eCharts.js到项目中, 在opotionts 中加入属性: grid:{ top:'25%',//距上边距 left:'25%',//距离左边距 right:'25%',//距离右边距 bottom:'25%',//距离下边距 -
【echarts】echarts实现疫情地图(一看就会篇)
2020-03-29 11:01:09echarts实现疫情地图(一看就会篇) echarts相比于highcharts更加简单上手,所以现在我个人觉得echarts的使用者是比highcharts多的,前面我介绍过highcharts实现疫情地图的方式,所以今天来补充一下echarts的使用... -
echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)
2017-03-30 16:05:55echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置。(当然yAxis也是一样有这个属性的) axisLabel: { ... -
使用echarts生成漂亮的3D地图
2018-10-09 15:45:59使用echarts生成漂亮的3D地图 echarts是非常好用的图表插件,本文使用echarts来生成一个漂亮的3D地图 效果 准备资料 第三方插件 <script type="text/javascript" src="... -
d3与echarts的区别
2018-05-31 14:09:341. 目前各大公司的大数据平台多使用d3还是echarts?什么时候适合用echarts,什么时候适合用d3?在我看几种数据可视化平台多使用折线图,面积图和柱状图,条图居多,对于echarts和d3都有使用。 对于使用d3还是echarts... -
angular9使用echarts地图
2020-06-13 16:20:303D地图新建一个angualr9的工程下载echarts创建容器创建地图实例效果图片参考资料 新建一个angualr9的工程 1.安装了@angular-cli的脚手架 2.ng -v查看版本 3. ng new my-project(项目名) 下载echarts npm i echarts ... -
ECharts-Java使用Java快速开发ECharts图表
2015-01-28 09:45:03大概在5个月前的时候,有个项目需要用到图表,百度ECharts很不错,就选择了ECharts。 我的项目是SpringMVC + Mybatis,当从数据库获取数据后,我不知道该如何处理这些数据了,是传到前台拼ECharts的Option结构还是在... -
uni-app中使用Echarts的实践总结
2018-10-11 18:18:531、首先在uni-app中不支持包下载所以得...npm install echarts mpvue-echarts --save 3、进入 node_modules 目录,里面的三个目录:echarts、mpvue-echats 、zrender 就是我们需要的第三方库。 4、把这三个库cop... -
ECharts 之引用ECharts
2016-11-24 14:46:14获取ECharts 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整版本。开发环境建议下载源代码版本,包含了常见的错误提示和... -
ECharts的resize失效原因以及使用方法
2019-07-18 21:36:38很多朋友在开发的过程中要把ECharts图标做成自适应浏览器宽高的效果。于是去翻看ECharts官网发现了resize方法,结果用了之后发现没用,而且根本不知道什么原因。 解决办法: 笔者在调试了好久之后发现,不能给... -
Echarts设置点击事件
2018-09-15 11:21:25通常在使用Echarts画图之后会碰到一个需求,通过点击生成后图形具体某一项来传递相应的参数然后进行一个页面的跳转,当我遇到这个需求第一就想到了用on绑定点击事件的方法,然后就在代码上进行尝试,果然可以实现这... -
【echarts】echarts图表自适应屏幕
2018-07-21 14:09:25echarts图表自适应屏幕 echarts如何自适应屏幕?只要加上两句话就可以啦! // 基于准备好的dom,初始化echarts图表 var ch_credit_in_major =echarts.init(document.getElementById('ch_lack_cr... -
在vue中使用echarts,echarts-map:echarts画地图
2019-05-09 18:31:321、首先安装:cnpm install echarts --save 2、然后main.js引入(也可以组件内引入) // 引入ECharts图表公共组件 import echarts from 'echarts' Vue.prototype.$echarts = echarts 3、再然后我们来画个折线图... -
Echarts中引用echarts.js出现ReferenceError: echarts is not defined问题
2019-09-01 22:08:381.在Echarts官网下载的ncubator-echarts-2.2.7版本(图一),自己写了按照官网去实现一个小demo.总是出现ReferenceError: echarts is not defined的问题(图二)。 图一: 图二: 在有网络的情况下,直接用... -
echarts词云
2019-08-05 19:02:51// import echarts from 'echarts'; var echarts = require('echarts'); require('echarts-wordcloud');//引入词云 import store from "../../../store/store.js"; import { mapMutations } from 'v... -
Echarts引入报错:echarts Uncaught ReferenceError: echarts is not defined
2019-04-17 16:42:57使用echarts制作图表,按照官方教程文档弄完后用浏览器打开发现不显示。 代码如下: <!DOCTYPE html> <html lang = "en"> <head> <meta charset="utf-8"> <title>echartsTest</... -
echarts图表随屏幕的宽度自适应
2018-10-16 11:48:11有时候会遇到屏幕宽度在变化,而echarts的图表保持原宽度不变的情况: 只需要在图表数据初始化函数之后,再resize()下就可以了。 代码示例: <div class="chart_box"> <div id=&... -
引入echarts
2019-03-11 10:51:17先安装npm.. ... let echarts = require('echarts/lib/echarts'); require('echarts/lib/chart/line'); require('echarts/lib/component/tooltip'); require('echarts/lib/component/title'); require(... -
echarts查看版本,echarts.js查看版本
2019-05-31 14:56:14layui查看charts的版本,如何查看echarts的版本,怎么查看echarts.js版本,echarts.version,百度echarts.js查看版本 在调用echarts的地方打印console.log(echarts.version)即可。 例: console.log(echarts.version... -
echarts echarts-x echarts-gl 制作3D地球
2017-11-06 17:28:46我的博客:http://gongyanli.com/echarts-echarts-x-echarts-gl-%E5%88%B6%E4%BD%9C3D%E5%9C%B0%E7%90%83/ github:https://github.com/Gladysgong/3D_earth_all tips:可以自己研究一下,等有时间我再详细讲解... -
ECharts介绍
2020-05-26 15:35:26ECharts介绍 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业... -
echarts5.0
2021-01-11 15:12:53先来占个坑,后续会写一些5.0的文章 echarts5.0: 传送门 -
“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts
2020-12-04 15:29:46页面新增同事的echart图 :直接报错"export ‘default’ (imported as ‘echarts’) was not found in ‘echarts’ 重新更新echarts等各种方法都试了,还是解决不了问题 最后在Google 查出来一个问题说可能是版本...
-
鲁斯-源码
-
GoCrawler-源码
-
MySQL 四类管理日志(详解及高阶配置)
-
如何挖矿及简单知识科普
-
单臂路由实验.docx
-
为什么Redis这么快?
-
apache-jmeter-5.4.1.zip
-
深究字符编码的奥秘,与乱码说再见
-
测试实践:Eclipse之JUnit
-
ActiveMq笔记.zip
-
为您的Linux应用开发加油提速(二)
-
四大汽车总线:LIN、CAN、FlexRay、MOST简述
-
2021-02-27
-
基于SSM实现的房屋租赁系统【附源码】(毕设)
-
华为1+X认证——网络系统建设与运维(初级)
-
2021-02-27
-
chsarp-crashcourse:我们把pacman kata弄得一团糟-源码
-
牛客华为机试第3题python
-
U盘安装系统时黑屏! 无法进入解决办法
-
哈希码2021-源码