echarts的使用过程

公司项目现在比较趋向于数据展示如:柱形图、环形图、折线图等等。所以就必须用一些图表插件,比较经常使用的是echarts和hightchart 。

echarts的使用过程看API真的是快让我炸了 所以找个时间把它记录一下 省的日后继续翻来翻去。

//文字旋转角度
axisLabel: {
interval: 0,//刻度值逐个显示   若为1 则是隔一个显示一个
rotate: 40,//文字旋转角度
textStyle: { //文字的样式设置
color: ‘#fff‘,
fontSize: 12
}
}

//y轴的设置

yAxis: [{
type: ‘value‘,
name: ‘电话数量‘, //Y轴的标题
nameLocation:‘middle‘, //标题位置 middle为居中显示
nameGap:40, //标题距轴线的距离
min: 0,
max: 500,
interval: 50, //隔几个数据显示 
axisLabel: {
formatter: ‘{value} ‘
},

splitLine: { show: false }, //去除网格线

axisLine: {    //改变轴颜色
lineStyle: {
color: ‘#fff‘,
}
},

},

//tooltip

tooltip: {
trigger: ‘axis‘,
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: ‘shadow‘ // 默认为直线,可选为:‘line‘ | ‘shadow‘ 鼠标滑入时的柱形图有一个遮罩层一样
}
},

时间: 2024-10-20 19:04:17

echarts的使用过程的相关文章

基于echarts在使用过程中的有关javascript的总结(入门级)

step1: 页面上在一段区域上从左到右添加三个同一类型的"pie"饼图,但是数据不一样时,如何减少不必要的重复代码段呢? 首先,html页面代码如下: <ul class="order-infoList"> <li> <div id="order-category" style="width: 100%;height: 100%"></div> </li> <

ECharts的简单使用过程

网页中经常要使用图表,以前使用的是highcharts插件,现在发现echarts使用起来和highcharts差不多,但是个人感觉echarts更酷炫,以下是echarts的使用过程,其实highcharts使用方法也跟这个差不多,几乎一样. 1.使用基础图形引入js <script type="text/javascript" src="/js/jBox/jquery-1.4.2.min.js"></script> 引入<scrip

echarts转为base64之后显示的图片不全

最近做的项目需要保存echarts图片,在页面其他地方预览,发现折线图上面看不到折线,柱形图能看到,百度了一下,网上有两种解决方法.我用的就是第一种,不过没有动画效果,没有动画效果.效果没有以前的好. 主要是echarts生成图表过程中存在动画,动画尚未完成时,就区获取base64数据,造成数据不全. 解决办法: animation 属性设置为 false 不要动画加载 延时获取base64数据 原文地址:https://www.cnblogs.com/zp1025/p/11007000.htm

可视化中的数据

当下随着大数据热潮的到来,数据可视化作为一个新兴的领域,受到了学术界和工业界的重视.从可视分析.数据新闻到商业报表,各个领域都在越来越多的使用它.既然是数据可视化,说明数据是主体,可视化只是将数据以可视的形式表达的手段.接下来小编就与大家一起揭开可视化中数据的面纱,一探究竟. 可视化什么:数据抽象 既然是数据可视化,无可非议,可视化的元素肯定是数据,这里所指的数据是广义上的数据,包括文本.图片.声音等超媒体数据.ECharts在可视化过程中所涉及的四种基本数据集类型分别是表格数据.网状数据.场数

ECharts 简单的使用过程,完美的图形展示

最近开发项目时要做图形报表,网上找了些东西,还是觉得ECharts靠谱,具备诸多优点,功能强大,图表完美,兼容性也比较好,基于html5动画渲染. 官网的demo中是写得比较全了,但很多用不到的东西直接影响了代码质量,下面我就饼图为例给描述一下echarts的基本使用过程,部分代码是我从demo中裁剪之后的代码 echarts饼状图实现步骤: 1,在简单的html中引入js文件,该js文件可以去官网下载 <head> <meta charset="utf-8">

谈谈使用echarts过程中踩过的坑

小结: 1. 使用jquery获取json对象遇到的问题 由于自己对ajax用的还不熟练,之前都是拷贝别人的代码拿来用的,这次自己写的时候倒是碰到好多麻烦一一列举如下: 1.1 在$ 与ajax之间还需要有个点号,即 $.ajax({...... }); 1.2 在返回值那里对于返回类型是text或是json格式时,不知道哪种使用eval,哪种使用 (.属性)来解析,正确方式如下 当返回类型是text时,使用eval解析,书写方式如下 var obj = eval("(" + data

ECharts, PHP, MySQL, Ajax, JQuery 实现前后端数据可视化

ECharts 下载js代码 工作原理浅析 在项目中引入ECharts 后台处理 数据库端MySQL PHP端 JQuery Ajax处理 ECharts 端处理 前端全部代码 演示结果 总结 最近要将后台数据库上的一些数据以可视化的方法显示到前端,找来找去,发现百度开发的这套图表工具库还不错,网上搜索了一下相关的教程,也算是实现了较为简单的demo.于是写下来,记录一下. ECharts ECharts是国人开发的一套前端的图表工具库,使用起来超方便,也很简单(当然了,前提是理解了其工作原理之

JFinal + B-JUI(1)-前端选型过程

一直在寻求做点什么,算是自我的一个锻炼吧. 一天看了JFinal的介绍及相关案例后,眼前一亮,提了几个问题波总也非常及时的给出解答. 说实在的也是受够了SSH各种码XML,一坨坨的配置,也可能是自己学艺不精,未得其精髓. 熟悉了一段JFinal后,决定用这个号称本星球极速JAVA开发框架做点东西,本来想等波总说的JFinal CMS,但迟迟没下文. 说下一些选型过程吧,也是各种尝试,各种坑. 1.前端 1)bootstrap模板 当下火热的前端可能是它了,各种模板满天飞,大多也都是些扁平化的,蛮

Echarts报错[MODULE_MISS]&quot;echarts/config&quot; is not exists!

项目用到Echarts插件,时下比较流行的是模块化包引入,但是很悲催的是楼主用的是标签式引入,所以从官网copy来的代码总是报一个 [MODULE_MISS]"echarts/config的错误,在这里,楼主对模块化包引入并没有学习,所以此文只是提醒那些项目用了标签式引入的同学们 啰嗦一句,所谓标签式引入就是用js的标签引入在html页面中导入js文件 形如 : <script type="text/javascript" src="${cxtPath}/as