|
|
/**
|
|
|
* 通用柱状图
|
|
|
* @param idname 要显示id的值
|
|
|
* @param datayy y轴第一列数组值
|
|
|
* datayyname 对应显示的名称
|
|
|
* dataycolor 第一类数显示的颜色
|
|
|
* @param dataye y轴第二列数组值
|
|
|
* datayename 对应显示的名称
|
|
|
* @param datax x轴显示数据
|
|
|
* dataecolor 第二类数显示的颜色
|
|
|
*/
|
|
|
function echartsbar(idname,datayy,dataycolor,datayyname,dataye,dataecolor,datayename,datax,yzname){
|
|
|
var charts=document.getElementById(idname);
|
|
|
echarts.dispose(charts);
|
|
|
var myChart = echarts.init(charts);
|
|
|
|
|
|
option = {
|
|
|
color: ['#3398DB'],
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
|
}
|
|
|
},
|
|
|
legend: {
|
|
|
data: [datayyname,datayename],
|
|
|
textStyle:{
|
|
|
color:"#fff"
|
|
|
}
|
|
|
},
|
|
|
grid: {
|
|
|
left: '3%',
|
|
|
right: '4%',
|
|
|
bottom: '3%',
|
|
|
containLabel: true
|
|
|
},
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: 'category',
|
|
|
data: datax,
|
|
|
axisTick: {
|
|
|
alignWithLabel: true
|
|
|
},
|
|
|
axisLine:{
|
|
|
lineStyle:{
|
|
|
color:'#fff',
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
name:yzname,
|
|
|
type: 'value',
|
|
|
axisLine:{
|
|
|
lineStyle:{
|
|
|
color:'#fff',
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: datayyname,
|
|
|
type: 'bar',
|
|
|
barWidth: '30%',
|
|
|
color:dataycolor,
|
|
|
data: datayy
|
|
|
},{
|
|
|
name: datayename,
|
|
|
type: 'bar',
|
|
|
barWidth: '30%',
|
|
|
color:dataecolor,
|
|
|
data: dataye
|
|
|
},
|
|
|
]
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* echarts 柱状图，三类
|
|
|
*/
|
|
|
function echartsbarsg(idname,datayy,dataycolor,datayyname,dataye,dataecolor,datayename,datax,
|
|
|
dataysname,datascolor,datays,yzname){
|
|
|
var charts=document.getElementById(idname);
|
|
|
echarts.dispose(charts);
|
|
|
var myChart = echarts.init(charts);
|
|
|
|
|
|
option = {
|
|
|
color: ['#3398DB'],
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
|
}
|
|
|
},
|
|
|
legend: {
|
|
|
data: [datayyname,datayename,dataysname],
|
|
|
textStyle:{
|
|
|
color:"#fff"
|
|
|
}
|
|
|
},
|
|
|
grid: {
|
|
|
left: '3%',
|
|
|
right: '4%',
|
|
|
bottom: '3%',
|
|
|
containLabel: true
|
|
|
},
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: 'category',
|
|
|
data: datax,
|
|
|
axisTick: {
|
|
|
alignWithLabel: true
|
|
|
},
|
|
|
axisLine:{
|
|
|
lineStyle:{
|
|
|
color:'#fff',
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: 'value',
|
|
|
name:yzname,
|
|
|
axisLine:{
|
|
|
lineStyle:{
|
|
|
color:'#fff',
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: datayyname,
|
|
|
type: 'bar',
|
|
|
barWidth: '30%',
|
|
|
color:dataycolor,
|
|
|
data: datayy
|
|
|
},{
|
|
|
name: datayename,
|
|
|
type: 'bar',
|
|
|
barWidth: '30%',
|
|
|
color:dataecolor,
|
|
|
data: dataye
|
|
|
},{
|
|
|
name: dataysname,
|
|
|
type: 'bar',
|
|
|
barWidth: '30%',
|
|
|
color:datascolor,
|
|
|
data: datays
|
|
|
},
|
|
|
|
|
|
]
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
* 各市绩效评估请款echarts
|
|
|
*/
|
|
|
function echartsbardg(idname,zczcdata,cbzzdata,ggcxdata,rhdddata,ggfwdata,xxxcdata,zdxmdata,datax){
|
|
|
var charts=document.getElementById(idname);
|
|
|
echarts.dispose(charts);
|
|
|
var myChart = echarts.init(charts);
|
|
|
|
|
|
option = {
|
|
|
color: ['#3398DB'],
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
|
}
|
|
|
},
|
|
|
legend: {
|
|
|
right:"0",
|
|
|
data: ['政策支持','筹备组织','改革创新','融合带动','公共服务','形象宣传','重点项目'],
|
|
|
textStyle:{
|
|
|
color:"#fff"
|
|
|
}
|
|
|
},
|
|
|
grid: {
|
|
|
left: '3%',
|
|
|
right: '4%',
|
|
|
bottom: '3%',
|
|
|
containLabel: true
|
|
|
},
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: 'category',
|
|
|
data: datax,
|
|
|
axisTick: {
|
|
|
alignWithLabel: true
|
|
|
},
|
|
|
axisLine:{
|
|
|
lineStyle:{
|
|
|
color:'#fff',
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: 'value',
|
|
|
name:"评分（分值）",
|
|
|
axisLine:{
|
|
|
lineStyle:{
|
|
|
color:'#fff',
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: "政策支持",
|
|
|
type: 'bar',
|
|
|
barWidth: '10%',
|
|
|
color:"#569ae2",
|
|
|
data: zczcdata
|
|
|
},{
|
|
|
name: "筹备组织",
|
|
|
type: 'bar',
|
|
|
barWidth: '10%',
|
|
|
color:"#33a0d2",
|
|
|
data: cbzzdata
|
|
|
},{
|
|
|
name: "改革创新",
|
|
|
type: 'bar',
|
|
|
barWidth: '10%',
|
|
|
color:"#46aab8",
|
|
|
data: ggcxdata
|
|
|
},{
|
|
|
name: "融合带动",
|
|
|
type: 'bar',
|
|
|
barWidth: '10%',
|
|
|
color:"#51b08e",
|
|
|
data: rhdddata
|
|
|
},{
|
|
|
name: "公共服务",
|
|
|
type: 'bar',
|
|
|
barWidth: '10%',
|
|
|
color:"#e5c33c",
|
|
|
data: ggfwdata
|
|
|
},{
|
|
|
name: "形象宣传",
|
|
|
type: 'bar',
|
|
|
barWidth: '10%',
|
|
|
color:"#e07361",
|
|
|
data: xxxcdata
|
|
|
},{
|
|
|
name: "重点项目",
|
|
|
type: 'bar',
|
|
|
barWidth: '10%',
|
|
|
color:"#8379cf",
|
|
|
data: zdxmdata
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
}
|
|
|
|
|
|
|
|
|
/**
|
|
|
* echarts 饼图
|
|
|
* @param idname id的名称
|
|
|
* @param titlename 标题名称
|
|
|
* @param data 显示的数据
|
|
|
* @param sumnum 总数，合计，
|
|
|
* @param titlepyl 标题的便宜量
|
|
|
* @param zjxspy 中间显示文字的便宜量（数组）
|
|
|
*/
|
|
|
function echartsbt(idname,titlename,data,sumnum,titlepyl,zjxspy){
|
|
|
var zjx = zjxspy[0];
|
|
|
var zjy = zjxspy[1];
|
|
|
var charts=document.getElementById(idname);
|
|
|
echarts.dispose(charts);
|
|
|
var myChart = echarts.init(charts);
|
|
|
option = {
|
|
|
title: [
|
|
|
{
|
|
|
text: titlename,
|
|
|
textStyle: {
|
|
|
fontSize: 15,
|
|
|
color: "#fff"
|
|
|
},
|
|
|
x: titlepyl,
|
|
|
y: '1%',
|
|
|
},
|
|
|
{
|
|
|
text: '总计',
|
|
|
subtext: sumnum,
|
|
|
textStyle:{
|
|
|
fontSize:15,
|
|
|
color:"#fff"
|
|
|
},
|
|
|
subtextStyle: {
|
|
|
fontSize: 15,
|
|
|
color: '#fff'
|
|
|
},
|
|
|
textAlign:"center",
|
|
|
// x: '46%',
|
|
|
// y: '45%',
|
|
|
x: zjx+'%',
|
|
|
y: zjy+'%',
|
|
|
}
|
|
|
],
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
formatter:function (parms){
|
|
|
// var str= parms.seriesName+"</br>"+
|
|
|
// parms.marker+""+parms.data.legendname+"</br>"+
|
|
|
// "数量："+ parms.data.value+"</br>"+
|
|
|
// "占比："+ parms.percent+"%";
|
|
|
|
|
|
var str = parms.data.name+":"+parms.data.value;
|
|
|
return str ;
|
|
|
},
|
|
|
position: function (point, params, dom, rect, size) {
|
|
|
// point：鼠标位置，是一个数组，如 [20, 50]
|
|
|
// params：Object|Array.<Object> 是需要的数据集
|
|
|
// dom：tooltip 的 dom 对象。
|
|
|
// rect：一个对象，只有鼠标在图形上时有效，是一个用 x, y, width, height 四个属性表达的图形包围盒。
|
|
|
// size：一个对象，包括 dom 的尺寸和 echarts 容器的当前尺寸，例如：{contentSize: [width, height], viewSize: [width, height]}。
|
|
|
// size中有两个属性：viewSize为外层div的大小，contentSize为tooltip提示框的大小
|
|
|
return ['40%', 30];
|
|
|
}
|
|
|
},
|
|
|
// legend: {
|
|
|
// type:"scroll",
|
|
|
// orient: 'vertical',
|
|
|
// left:'70%',
|
|
|
// align:'left',
|
|
|
// top:'middle',
|
|
|
// textStyle: {
|
|
|
// color:'#8C8C8C'
|
|
|
// },
|
|
|
// height:250
|
|
|
// },
|
|
|
series: [
|
|
|
{
|
|
|
// name:'标题',
|
|
|
type:'pie',
|
|
|
center: ['50%', '60%'],
|
|
|
radius: ['50%', '75%'],
|
|
|
clockwise: false, //饼图的扇区是否是顺时针排布
|
|
|
avoidLabelOverlap: false,
|
|
|
label: {
|
|
|
normal: {
|
|
|
show: false,
|
|
|
}
|
|
|
},
|
|
|
labelLine: {
|
|
|
normal: {
|
|
|
smooth:false,
|
|
|
}
|
|
|
},
|
|
|
data:data
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
|
|
|
myChart.setOption(option);
|
|
|
}
|
|
|
|
|
|
|
|
|
/**
|
|
|
* 各市投资情况
|
|
|
* echarts 柱状图，折线图整合，
|
|
|
* @param idname
|
|
|
* @param datayy
|
|
|
* @param dataycolor
|
|
|
* @param datayyname
|
|
|
* @param dataye
|
|
|
* @param dataecolor
|
|
|
* @param datayename
|
|
|
* @param datax
|
|
|
* @param yzname
|
|
|
*/
|
|
|
function echartsbarline(idname,datayy,dataycolor,datayyname,dataye,dataecolor,datayename,datax,yzname,
|
|
|
datays,dataysname,datascolor,yename){
|
|
|
var charts=document.getElementById(idname);
|
|
|
echarts.dispose(charts);
|
|
|
var myChart = echarts.init(charts);
|
|
|
|
|
|
option = {
|
|
|
color: ['#3398DB'],
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
|
},
|
|
|
formatter:function(params){
|
|
|
var cityname = params[0].axisValue;
|
|
|
var ret = cityname+"</br>";
|
|
|
for(var i = 0;i<params.length;i++){
|
|
|
var name = params[i].seriesName;
|
|
|
var value = params[i].value;
|
|
|
ret += params[i].marker; // 显示上鼠标经过提示框中前边显示的颜色样式
|
|
|
if(name == "投资进度"){
|
|
|
ret += name+":"+value+"%"+"</br>";
|
|
|
}else{
|
|
|
ret += name+":"+value+"</br>";
|
|
|
}
|
|
|
}
|
|
|
return ret;
|
|
|
},
|
|
|
},
|
|
|
legend: {
|
|
|
data: [datayyname,datayename,dataysname],
|
|
|
textStyle:{
|
|
|
color:"#fff"
|
|
|
}
|
|
|
},
|
|
|
grid: {
|
|
|
left: '3%',
|
|
|
right: '4%',
|
|
|
bottom: '3%',
|
|
|
containLabel: true
|
|
|
},
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: 'category',
|
|
|
data: datax,
|
|
|
axisTick: {
|
|
|
alignWithLabel: true
|
|
|
},
|
|
|
axisLine:{
|
|
|
lineStyle:{
|
|
|
color:'#fff',
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
name:yzname,
|
|
|
type: 'value',
|
|
|
axisLine:{
|
|
|
lineStyle:{
|
|
|
color:'#fff',
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
name:yename,
|
|
|
type: 'value',
|
|
|
axisLine:{
|
|
|
lineStyle:{
|
|
|
color:'#fff',
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: datayyname,
|
|
|
type: 'bar',
|
|
|
barWidth: '30%',
|
|
|
color:dataycolor,
|
|
|
data: datayy,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
barBorderRadius:[5, 5, 0, 0], // 设置圆角
|
|
|
}
|
|
|
}
|
|
|
},{
|
|
|
name: datayename,
|
|
|
type: 'bar',
|
|
|
barWidth: '30%',
|
|
|
color:dataecolor,
|
|
|
data: dataye,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
barBorderRadius:[5, 5, 0, 0], // 设置圆角
|
|
|
}
|
|
|
}
|
|
|
},{
|
|
|
name: dataysname,
|
|
|
type: 'line',
|
|
|
// barWidth: '30%',
|
|
|
color:datascolor,
|
|
|
data: datays,
|
|
|
yAxisIndex: 1, // 使用第二个y轴
|
|
|
},
|
|
|
]
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
} |
