echarts可视化自行封装一个js
封装好以后在页面引用这个js然后直接调用这个js里面的方法往里面传参即可，有一些特殊的属性如果少部分跟这里不一样或这里面没有可以自行根据Echarts官网和需求写一个即可
var echartsTheme;
$(document).ready(function(){
//setEchartsTheme("infographic");
setEchartsTheme("shine");//设置主题
});
function setEchartsTheme(inTheme){
echartsTheme = inTheme;
}
function echartShow(option,container){
try{
if(echartsOptionDefault != undefined)
setChartsDefault(echartsOptionDefault,option);
}catch(e){}
if(echartsTheme==undefined && option.color==undefined){
option["color"] = [
"#00e2fd",
"#e9c229",
"#11d67c",
"#fe6c84",
"#fff600",
"#7e71ff",
"#008bfe",
"#f89758",
"#6e7074",
"#546570",
"#c4ccd3"
];
}
if(option.toolbox==undefined){
option["toolbox"]={show : true,
feature : {
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar','pie']},
restore : {show: true},
saveAsImage : {show: true}
}
};
}
var dom = document.getElementById(container);
dom.removeAttribute("_echarts_instance_");
var myChart;
if(echartsTheme==undefined){
myChart = echarts.init(dom);
}else{
myChart = echarts.init(dom,echartsTheme);
}
myChart.setOption(option, true);
window.onresize = myChart.resize;
return myChart;
}
function setChartsDefault( data, inOption ) {
if ( inOption == undefined ) {
inOption=data;
} else if ( data.constructor == Array ) {
for ( var i=0; i0], inOption[i] );
}
//return ;
} else {
for ( var key in data ) {
if("xAxis,yAxis".indexOf(key)>-1 //设置例外
&& inOption[key]==undefined)
continue;
if(inOption[key]==undefined ){
inOption[key] = data[key];
}else{
if(typeof( data[key])=="object"){
setChartsDefault( data[key], inOption[key] );
}
}
}
//return ;
}
}
function ajaxReqJson(url,params,sc){
$.ajax({
url:url,//json文件位置
type: "GET",//请求方式为get
dataType: "json", //返回数据格式为json
success: sc
})
}
function ajaxReq(url,params,sc){
var rtn;
$.ajax({
type: "GET",
url: url,
data: params,
dataType:"json",
contentType: "application/x-www-form-urlencoded; charset=utf-8",
cache: false,
async: false,
success:sc,
error:function(XMLHttpRequest, textStatus, errorThrown){
alert(errorThrown);
//rtn=XMLHttpRequest.status;
}
});
return rtn;
}
function ajaxReqAsync(url,params,sc,err){
if(err==undefined){
err=function(XMLHttpRequest, textStatus, errorThrown){
alert("系统异常
readyState:"+XMLHttpRequest.readyState+"
status:"+textStatus+"
errorThrown:"+errorThrown);
return;
}
}
$.ajax({
type: "POST",
url: url,
data: params,
dataType:"json",
contentType: "application/x-www-form-urlencoded; charset=utf-8",
cache: true,
async: true,
success:sc,
error:err
});
}
function isNull(obj){
if(obj == undefined || obj==null || obj == ''|| obj == 'undefined'|| obj=='null')
return true;
return false;
}
/**
* 展示饼图
* @param {} cnt_div 显示的容器 页面里的div
* @param {} title 标题 如"车流量情况占比"
* @param {} name 比较的项目 如"车辆时间差"
* @param {} data 数据 "data": [{"name": "滨城区","rows":"","value": "3861"}{"name": "邹平县","rows":"","value": "2025"}]
*/
function echartPie(cnt_div,title,name,data,funcClick,inlegend,inradius,ingrid,roseType){
var grid={};
if(ingrid!=undefined) grid = ingrid;
var option = {
title : {
text: title,
x:'center'
},
toolbox:{
show : true,
feature : {
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
tooltip : {
trigger: 'item',
formatter: "{a}
{b}:
{c}({d}%)"
},
legend: {
show:inlegend==undefined?false:inlegend,
orient : 'vertical',
x : 'left'
},
grid:{height:100},
calculable : true,
series : [
{
name:name,
type:'pie',
radius :inradius==undefined? ['5%', '30%']:inradius,//饼图圆环百分比
selectedMode: 'single',
selectedOffset: 5,
clockwise: true,
minAngle:10,
label: {
show:inlegend==undefined?true:!inlegend,
position:'outside',
formatter: '{b}:{d}%'
},
data: data.sort(function (a, b) { return a.value - b.value; })
}
]
};
if(roseType==undefined){
option.series[0]["roseType"]= 'radius';
}else{
}
var myChartPie = echartShow(option,cnt_div);
if(funcClick != undefined)
myChartPie.on('click',funcClick);;
}
/**
* 展示折线图
* @param {} cnt_div 显示的容器 页面里的div
* @param {} title 标题 如"车流量情况"
* @param {} xaxis x轴["滨城区","邹平县"]
* @param {} yaxis y轴["车流量","增幅"]
* @param {} data 数据 [
{
"name": "车流量情况",
"type": "bar",
"yAxisIndex": 0,
"data": [
{"rows":"","value":"2"}, {"rows":"","value":"2"},{"rows":"","value":"2"}
]
}, {
"name": "增幅",
"type": "line",
"yAxisIndex": 1,
"data": [
{"rows":"","value":"2"},{"rows":"","value":"2"},{"rows":"","value":"2"}
]
}
]
*/
function echartBarLine(cnt_div,title,xaxis,yaxis,data,funcClick,ingrid){
var grid={
top:'15%',
height:'68%'};
if(ingrid!=undefined)grid = ingrid;
var yAxis = new Array();
for(var i=0,size=yaxis.length;ivar obj = new Object();
obj ={
type: 'value',
name: yaxis[i],
axisLabel: {
formatter: '{value}'
},
axisLine: {
lineStyle: {
width:'2'//坐标线的宽度
}
}
};
yAxis.push(obj);
}
var legend = new Array();
for(var i=0,size=data.length;ivar option = {
title : {
text: title,
x:'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
data: legend
},
grid:grid,
xAxis: [
{
axisLabel: {
interval:0,
rotate:0
},
type: 'category',
data: xaxis,
axisPointer: {
type: 'shadow'
}
}
],
yAxis: yAxis,
dataZoom: [
{
type: 'inside'
}
],
series: data
};
var myChartBarLine = echartShow(option,cnt_div);
if(funcClick != undefined)
myChartBarLine.on('click',funcClick);;
}
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = getPos([data[i].name.replace(/ /g,'')]);
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
rows:data[i].rows
});
}
}
return res;
};
function getPos(name){
for (var i = 0; i < geoPos.length; i++) {
if(name == geoPos[i].name ){
return geoPos[i].cp;
}
}
}