文档章节

echarts页面图表工具的使用实例

不打伞的小鱼
 不打伞的小鱼
发布于 2016/10/08 17:07
字数 851
阅读 121
收藏 1

期望功能:折线图显示商品价格变动趋势图,然后在每个拐点的位置显示价格和涨跌百分比。

说明: 查询了很久,好像并不支持折点位置显示多个数值,除非画多个折线,把其他的折线颜色设置为白色,并且白色的折线最好放在首位,因为放在最后的话,如果有重叠的部分,可能会覆盖掉其他的折线。

实现:

1.需要下载引入echarts.min.js

2.页面点击事件:查看成本趋势

3.js方法

function fetchPurchaseCost(sku, id, stockId){

var dom = $('purchaseCost_'+id +"_" + stockId);

if(dom.style.display == "block"){

dom.style.display = "none";

return;

}

var myChart = echarts.init(dom);

var app = {};

option = null;

option = {

title: {

text: 'sku成本趋势'

},

tooltip: {

trigger: 'axis'

},

legend: {

data:['价格']

},

grid: {

left: '3%',

right: '4%',

bottom: '3%',

containLabel: true

},

toolbox: {

feature: {

saveAsImage: {}

}

},

//设置x轴可拖动

dataZoom: [{

type: 'inside',

}],

xAxis: {

type: 'category',

data: []

},

yAxis: {

type: 'value'

},

series: [

{

name:'涨跌百分比',

type:'line',

data:[]

},

{

name:'价格',

type:'line',

data:[]

}

],

color:[

'#FF0000'

],

backgroundColor:[

'#FFFFFF'

]

};

myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画

var tems=[]; //转化率数组(存放服务器返回的所有转化率值)

var dates=[]; //时间数组

var priceThans = []; // 涨跌百分比

var url = "/product/fetchPurchaseCost";

var param = $H({});

param.set("sku", sku)

new Ajax.Request(url, {

parameters: param,

onSuccess: function (transport) {

var result = eval(transport.responseText);

//请求成功时执行该函数内容,result即为服务器返回的json对象

if (result != null && result.length > 0) {

for(var i=0;i<result.length;i++){

var resultMap = result[i];

tems.push(resultMap.purchasePrice);

dates.push(resultMap.orderDate);

priceThans.push(resultMap.priceThan);

}

myChart.hideLoading(); //隐藏加载动画

myChart.setOption({ //载入数据

xAxis: {

boundaryGap: true,

data: dates //填入X轴数据

},

series: [ //填入系列(内容)数据

{

name: '涨跌百分比',

data: priceThans,

itemStyle : {

normal : {

color:'white',

lineStyle:{

color:'white'

}

}

},

},

{

// 根据名字对应到相应的系列

name: '价格',

data: tems,

itemStyle : {

normal : {

color:'red',

lineStyle:{

color:'red'

}

}

},

//显示最大值最小值的气泡

markPoint: {

data: [

{type: 'max', name: '最大值'},

{type: 'min', name: '最小值'},

]

}

}

]

});

}else {

//返回的数据为空时显示提示信息

alert("图表请求数据为空,可能服务器暂未录入数据,您可以稍后再试!");

myChart.hideLoading();

}

},

onFailure: function (transport) {

//请求失败时执行该函数

alert("图表请求数据失败,可能是服务器开小差了");

myChart.hideLoading();

}

});

if (option && typeof option === "object") {

myChart.setOption(option, true);

dom.style.display = "block";

}

}

 

4. struts.xml的配置

5.fetchPurchaseCost 方法

public void fetchPurchaseCost() throws IOException{

Gson gson = new Gson();

MyDate myDate = new MyDate();

Map<String, Object> requestMap = new HashMap<String, Object>();

String skuString = getSku();

ProductDao productDao = new ProductDao();

List<PurchaseCost> purchaseCosts = productDao.fetchPurchaseCostBySku(skuString);

PrintWriter out = ServletActionContext.getResponse().getWriter();

String oldDate = myDate.getDate(-30);

ArrayList<String> dateList = myDate.splitDateRange(oldDate, myDate.getCurrentDate());

List<Map<String, Object>> resultList = new ArrayList<Map<String, Object>>();

double lastPrice = 0.0;

for (String date : dateList) {

Map<String, Object> resultMap = new HashMap<String, Object>();

if (CollectionUtils.isNotEmpty(purchaseCosts)) {

for (PurchaseCost purchaseCost : purchaseCosts) {

String orderCreateDate = purchaseCost.getOrderCreateDate();

String [] ordercreateStrings = orderCreateDate.split(" ");

if (date.equals(ordercreateStrings[0])){

resultMap.put("orderDate", date);

resultMap.put("purchasePrice", purchaseCost.getPurchasePrice());

double priceThan = 0.0;

if (lastPrice != 0.0) {

priceThan = (purchaseCost.getPurchasePrice() - lastPrice )/lastPrice;

}

resultMap.put("priceThan", priceThan);

lastPrice = purchaseCost.getPurchasePrice();

}

}

}

if (resultMap.isEmpty()) {

resultMap.put("orderDate", date);

resultMap.put("purchasePrice", 0);

double priceThan = 0.0;

if (lastPrice != 0.0) {

priceThan = (0 - lastPrice )/lastPrice;

}

resultMap.put("priceThan", priceThan);

lastPrice = 0;

}

resultList.add(resultMap);

}

out.flush();

out.print(gson.toJson(resultList));

}

 

6.效果图

 

 

--------------------------------------------------------以下为2016-10-11 15:34 补充说明----------------------------------------

对于之前做出的效果,由于把涨跌百分比的折线设置为白色,这样会在折线与X轴相交的时候,出现断开的现象,于是想到把涨跌百分比的折线设置为透明,并且设置为柱状图(因为测试发现,折线图还是会覆盖掉一部分X轴),具体改动如下:

 

 

另外,如果要改变图表的大小,直接修改存放图表的div的样式即可。

改进之后的效果图如下:

 

END ! 

© 著作权归作者所有

不打伞的小鱼
粉丝 69
博文 42
码字总数 24218
作品 0
深圳
程序员
私信 提问
详解在vue中使用echarts图表实例代码

安装vue依赖 使用npm 使用yarn 使用国内的淘宝镜像: 引入ECharts 安装好的ECharts会放在node_modules目录下。 全部引入 1.直接在项目代码引入 可以直接在项目代码中 得到 ECharts。声明一个...

peakedness丶
2018/12/24
300
0
.net图表之ECharts随笔01-最简单的使用步骤

找了几种绘制图表的办法,后面选定了ECharts 首先,从NuGet管理中添加ECharts包,然后就可以调用绘制图表啦! 基本步骤: 1.为ECharts准备一个具备大小(宽高)的Dom 2.ECharts的js文件引入 ...

DoKey713
2018/11/26
0
0
ECharts 3 测试版发布,焕然一新的面貌

ECharts 3 测试版发布 注:由于直接转载内容,文章中实例效果无法查看,如需查看详情请往 ECharts3 带来了什么 ECharts 在 github 上沉寂了数个月,想必很多小伙伴充满了各种疑问,ECharts是...

pissang
2015/12/04
71.5K
66
TaroEcharts-各种图表在Taro中的实践

随着React的快速发展,我们也越来越接受它的写法和思想,如今小程序如火中天,普通的编译模式早已不适应开发者的需求。人们在不断的寻求一种React能够在小程序中编译的语言框架,因此Taro便诞...

hello等风来
01/17
0
0
零云技术分享之:ECharts可视化图表开发

欢迎交流:零云,互联网产品快速开发框架 百度有几个开源项目值得称赞的,比如blend2、UEditor、ECharts 等,这里我们聊一聊ECharts3 可视化图表库。 有了ECharts 3,我们可以非常方便的构建...

CoreThink
2017/03/06
377
0

没有更多内容

加载失败,请刷新页面

加载更多

CRM、DMP、CDP都是什么?有什么区别?

Markter对CRM系统(Customer Relationship Management System,客户关系管理系统),营销自动化等概念都已经比较熟悉,也许DMP(Data Management Platform,数据管理平台)也多多少少有些了解。...

怡海软件-CRM
10分钟前
3
0
中台是什么,到底要解决什么问题?

故事的开始 这个最早由阿里在2015年提出的“大中台,小前台”战略中延伸出来的概念,最近在国内大热。阿里、腾讯、百度、京东、美团、滴滴等一众互联网巨头,从去年到今年,接连开始组织架构...

喵二狸
22分钟前
2
0
Linux Centos 7 - MySQL 5.7离线安装

内部网络通过离线包的方式进行安装。 一、下载 下载地址:https://dev.mysql.com/downloads/mysql/ 进入页面后,点击右侧链接。 下载对应版本。 通过xftp6等工具上传到服务器上。 二、安装和...

华山猛男
22分钟前
2
0
EventBus 3 全解

EventBus 3 全解 [TOC] 使用 一个基于观察者模式的事件发布/订阅框架. 用于模块间通信和解耦, 使用方便,性能高. 基本使用 1. gradle导入依赖库 implementation 'org.greenrobot:eventbus:3....

马湖村第九后羿
24分钟前
3
0
HTTP 协议

什么是HTTP协议? HTTP是hypertext transport protocol的缩写,即超文本传输协议。 是用于万维网服务器与本地浏览器之间传输超文本的传送协议。可以使浏览器更加高效,使网络传输减少。能够保...

彩色泡泡糖
35分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部