前端可视化数据显示 Echart 为什么选择它，没选择蚂蚁金服的AntV
两个字 方便 特别是与前端的 js AntV 配置麻烦，我只需要工具快速开发图表而已
与jsp关联 通过（ajax）前端页面显示后台数据
画饼图的话 用 echart 2.0 echart 2界面比较好 饼图可以拖动取消
词云需要 echarts-wordcloud.js
做地图更需要其他map插件了
下载
学习爬过很多坑 遇过很多 echarts is not defined 引入js文件的问题
echarts.js 一定要放在 Jquery.js 文件的后面 也要放在图表所在div的后面，防止加载问题
最后的最后 直接看官方文档
<div class="main" id="main" style="height: 400px;width: 500px;">
</div>
<!-- tubiao chajian -->
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript">
require.config({
paths: {
echarts: './js'
}
});
require(
[
'echarts',
'echarts/chart/line', // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
'echarts/chart/bar'
],
function (ec) {
var myChart = ec.init(document.getElementById('main'));
var option = {
...
}
myChart.setOption(option);
}
);
</script>
找官方例子 复制option里面的内容到《script》
<div class="main" id="main" style="height: 400px;width: 500px;">
</div>
<!-- tubiao chajian -->
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript">
require.config({
paths: {
echarts: './js'
}
});
require(
[
'echarts',
'echarts/chart/line', // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
'echarts/chart/bar'
],
function (ec) {
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip : {
trigger: 'axis'
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
legend: {
data:['蒸发量','降水量','平均温度']
},
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis : [
{
type : 'value',
name : '水量',
axisLabel : {
formatter: '{value} ml'
}
},
{
type : 'value',
name : '温度',
axisLabel : {
formatter: '{value} °C'
}
}
],
series : [
{
name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name:'平均温度',
type:'line',
yAxisIndex: 1,
data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
}
myChart.setOption(option);
}
);
</script>下一步
ajax获取数据
以数组形式添加到echart series data
我项目的部分demo
var myChart = echarts.init(document.getElementById('main'));
$.ajax({
type : "GET",
/*async : false, //同步执行*/
url : echartUrl+"?devId="+DevId,
dataType : "json", //返回数据形式为json
success : function(result) {
if (result) {
myChart.setOption({
tooltip : {
trigger: 'axis' //鼠标放在轴上显示
},
title:{
text:'\n环境监测历史记录',
x:'center',
y:'top'
},
toolbox: {
show : true,
//orient:'vertical',//默认水平 这里是垂直
feature : {
mark : {
show: true,
title : {
mark : '辅助线 -开关',
markUndo : '辅助线 -删除',
markClear : '辅助线 -清空'
},
lineStyle : { //barStyle 两种都是样式
width : 1,
color : '#1e90ff',
type : 'dashed'
}
},
dataView : {show: true, readOnly: false,//允许修改
optionToContent: function (opt) {
var axisDate = opt.xAxis[0].data;
var series = opt.series;
var table = '<table style="width:100%;text-align:center"><tbody><tr> ' //有多少条数据就写几条
+ '<td>时间</td>'
+ '<td>'+ series[0].name + '</td>'
+ '<td>'+ series[1].name + '</td>'
+ '<td>'+ series[2].name + '</td>'
+ '</td>';
for (var i = 0, l = axisDate.length; i<l; i++) {
table += '<tr>'
+ '<td>' + axisDate[i] + '</td>'
+ '<td>' + series[0].data[i] + '</td>'
+ '<td>' + series[1].data[i] + '</td>'
+ '<td>' + series[2].data[i] + '</td>'
+ '</tr>';
}
table += '</tbody></table>';
return table;
}
},
magicType: {show: true, type: ['line', 'bar' , 'stack', 'tiled']},
restore : {show: true, title : '还原'},
saveAsImage : {show: true, title : '保存为图片'}
}
},
calculable : true,
legend: {
data:['降水量','温度','湿度']
},
dataZoom: [ //区域缩放
{
show: true,
realtime: true,
start: 65,
end: 85
},
{
type: 'inside',
realtime: true,
start: 65,
end: 85
}
],
xAxis : [
{
type : 'category',/*category*/
data : result.collect.map(function (str) {
str = changeDateFormatNoS(str);
return str.replace(' ', '\n')
})
axisLabel:{
//rotate:10, //刻度旋转45度角
//interval:chart,//横坐标隐藏个数
textStyle:{
color:"#24C5DB",
fontSize:12
}
}
}
],
yAxis : [
{
type : 'value',
name : '水量',
axisLabel : {
formatter: '{value} mm'
}
},
{
type : 'value',
name : '温度',
axisLabel : {
formatter: '{value}'+' °C',
min:-10,
max:10
}
}
],
series: [
{
name:'降水量',
type:'bar',
connectNulls: true,
data: result.rain//[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name:'温度',
type:'line',
yAxisIndex: 1,
connectNulls: true,
data:result.air_temp
},
{
name:'湿度',
type:'line',
yAxisIndex: 1,
connectNulls: true,
data:result.air_humi
}
]
},true)
}
},
error : function(errorMsg) {
alert("图表请求数据失败!");
}
});
//转换日期格式(时间戳转换为datetime格式)
function changeDateFormat(cellval) {
var dateVal = cellval + "";
if (cellval != null) {
var date = new Date(parseInt(dateVal.replace("/Date(", "").replace(")/", ""), 10));
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
return date.getFullYear() + "-" + month + "-" + currentDate + " " + hours + ":" + minutes + ":" + seconds;
}
}多表联动
很明显，至少两个表 柱状图周一的数据对应 饼图全部数据
通过 echarts.connect 链接
echarts.connect([myChart1,myChart2]);
饼图
柱形图
用于窗口变动时 自适应
更改主题
https://www.echartsjs.com/download-theme.html
在官网上点击下列主题 就能下载JS插件
也可自己定制 主题编辑器 - Apache ECharts
须事先下载主题JS文件
theme就是主题
事件
点击羊毛衫时 出现百度搜索羊毛衫页面
当点击图表柱状图的 裤子列 ，切换图表
// 写在 myChart.setOption()后面 myChart.on("click",function(params){ if(params.name=="裤子"){ $.get('data/data.json').done(function(data){ //console.log(data); myChart.setOption({ xAxis : { data: data.categories }, series: [{ name : '销量', data : data.data }] }); }); //这里是获取json 可以换成ajax获取后台 } });鼠标触摸事件 饼图 + 仪表盘
未来一周天气
markLine 警戒线
markPoint 最大值最小值显示
option = {
title: {
text: '未来一周气温变化',
subtext: '纯属虚构'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['最高气温','最低气温']
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
},
series: [
{
name:'最高气温',
type:'line',
data:[11, 11, 15, 13, 12, 20, 10],
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
},
{
name:'最低气温',
type:'line',
data:[1, -2, 2, 5, 3, 2, 0],
markPoint: {
data: [
{name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'},
[{
symbol: 'none',
x: '90%',
yAxis: 'max'
}, {
symbol: 'circle',
label: {
normal: {
position: 'start',
formatter: '最大值'
}
},
type: 'max',
name: '最高点'
}]
]
}
}
]
};
下次学习 webpack 里面用Echarts
还有 timeline 时间轴 ，*（ 常用于展示同一系列数据在时间维度上的多份数据 ）。。。
https://echarts.baidu.com/examples/editor.html?c=line-aqi 直接画Y轴警戒线 颜色区间
折线图
折线数值差距过大了，显示不全
方法一： （最简单的）用双轴图 把数值差距极大的那条 例如：光照强度
type:'line' 改为 type:'bar' 改为柱状图 互相不影响了
（老大说：要求是全折线图，有点指标不治本。。 泪奔 咱不提需求，让我咸鱼两天行不行）series: [
{
name:'光照强度',
type:'bar',//line
yAxisIndex: 1,
方法二：
根据https://echarts.baidu.com/option.html#yAxis.type 我把 type : 'value' 改为
yAxis : [
{
// type : 'value',
type : 'log',
/*data : [-40,0,50,100,1000,10000,100000],*/ /*这个在'category' 有效 */
//show : false,
name : '温度',
min: -50,
max: 150
}
'value'数值轴，适用于连续数据。
'category'类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
'time'时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
'log'对数轴。适用于对数数据。
好那么一丢丢 然而10到100区间 —— 然并卵
{
name:'光照强度',
type:'line',//line
//yAxisIndex: 1, //默认为0
//smooth : true, 是否平滑曲线显示
connectNulls: true,
data :result.light
},除了光照强度这条数据值差距过大的外， 其他都加上 yAxisIndex: 1, 
老大说 等比缩放 原值1000的显示到100, 原值100显示在100 不会啊。。。他在说什么。。
我又在Y轴上 挣扎了一下
type : 'value',
//show : false
name : '光照',
offect : 20,
axisLabel: {
formatter: function (value, index) {
if (value >= 100 && value < 1000) {
value = value / 10 + ' lux';
} else if (value >= 1000 && value < 10000) {
value = value / 100 + ' lux';
}else if (value >= 10000 )
value = value /1000 + ' lux';
return value;
}
},
没用 ，只改变了Y轴上的显示，没实际改变数据的显示位置
最后 依然是双Y轴 只不过
通过 yAxisIndex 控制绑定对应的Y轴
{
name:'光照强度',
type:'line',
yAxisIndex: 1, //默认为0
data :result.light
},Echarts图形区域缩放，实现Y轴数据不随X轴的拖动变换
http://wiki.smartbi.com.cn/pages/viewpage.action?pageId=42009970 好像没怎么用 ，纪念一下
前端ajax 获取后台返回的 option 数据 出现无法识别及渲染的问题
alert(obj.data)提示是 undefined；首先值没有获取失败
一个个试看是哪个问题
eval('('+obj.data+')');
JSON.parse(obj.data)
// 使用刚指定的配置项和数据显示图表。
myChart.hideLoading();
myChart.setOption(eval('('+obj.data+')'), true);
console.log(obj.data);
console.log(eval('('+obj.data+')'));
console.log(eval('('+JSON.parse(obj.data)+')'));
// if (isJSON(eval('('+JSON.parse(obj.data)+')'))){
// myChart.setOption(eval('('+JSON.parse(obj.data)+')'), true);
// }else{
// myChart.setOption(eval('('+obj.data+')'), true);
// }
//JSON.parse()或jQuery 的 $.parseJSON 将其转换为JavaScript对象
//Uncaught SyntaxError: Unexpected token u in JSON at position 410
//JSON.parse()的问题。解决:看转换的数据是不是json字符串了。如果数据可能是json字符串，也可能不是，想避免的话，就判断一下了
7264
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
