首页地图渲染之国际化(三)—趋势图联动显示
实现效果
1.三个趋势图一起联动显示
var myChart = echarts.init(document.getElementById('main'), 'infographic');
myChart.setOption(option = {
tooltip:{
trigger: 'axis',
formatter: function (params, ticket, callback) {
var titleData1;
var titleData2;
var titleData3;
var color1;
var color2;
var color3;
var time= params[0].name;
var titleHTML;
for (var i = 0; i < params.length; i++) {
titleData = params[i].data;
if ( params[i].seriesName==($.i18n.prop('com_zte_lte_processingpoorqualitregion_header_poorqualitregion_poorareacount'))){
titleData1=(isNaN(String(titleData))?"--":(titleData));
color1 = params[i].color;
}else if ( params[i].seriesName==($.i18n.prop('com_zte_lte_processingpoorqualitregion_header_poorqualitregion_dealingorder'))){
titleData2=(isNaN(String(titleData))?"--":(titleData));
color2 = params[i].color;
}else if ( params[i].seriesName==($.i18n.prop('com_zte_lte_processingpoorqualitregion_header_poorqualitregion_overtimeorder'))){
titleData3=(isNaN(String(titleData))?"--":(titleData));
color3 = params[i].color;
}
}
titleHTML=time+'<br><div style="display:inline-block;height:10px;width:10px;border-radius:5px;background-color:' + color1 + '"></div>  '
+ $.i18n.prop('com_zte_lte_processingpoorqualitregion_header_poorqualitregion_poorareacount')+' : ' + titleData1+'<br><br>'
+time+'<br><div style="display:inline-block;height:10px;width:10px;border-radius:5px;background-color:' + color2 + '"></div>  '
+$.i18n.prop('com_zte_lte_processingpoorqualitregion_header_poorqualitregion_dealingorder')+ ':' + titleData2+'<br><br>'
+time+'<br><div style="display:inline-block;height:10px;width:10px;border-radius:5px;background-color:' + color3 + '"></div>  '
+$.i18n.prop('com_zte_lte_processingpoorqualitregion_header_poorqualitregion_overtimeorder')+ ':' + titleData3;
return titleHTML;
}
/*position: function (pos, params, dom, rect, size) {
// 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
var obj = {top: 60};
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
return obj;
} */
//position: ['50%', '50%']
},
axisPointer: {
link: {xAxisIndex: 'all'},
label: {
backgroundColor: '#777'
}
},
grid: [
{
height: '20%',
top:'16%'
}, {
top: '49%', //44
height: '20%' //20
},
{
top: '80%', //44
height: '20%' //20
}
],
xAxis:[{
gridIndex: 0,//定义图标所在位置，不给默认为0，即第一个，而且必须按照从小到大的
type : 'category',
position:'bottom',
axisLine:{
lineStyle:{//坐标轴颜色
type:'dashed',
color:"#FFFFFF"
}
},
splitLine:{
show:false,//网格是否显示
interval: 0,
lineStyle:{
type:'dashed'
}
},
axisLabel: {
show: true,
interval: 2,
textStyle: {
color: '#fff'
}
},
data : chartData.data1.x
},{
gridIndex: 1,
type : 'category',
position:'bottom',
axisLine:{
lineStyle:{
type:'dashed',
color:"#FFFFFF"
}
},
splitLine:{
show:false,//网格是否显示
interval: 0,
lineStyle:{
type:'dashed'
}
},
axisLabel: {
show: true,
interval: 2,
textStyle: {
color: '#fff'
}
},
data : chartData.data2.x
},{
gridIndex: 2,
type : 'category',
position:'bottom',
axisLine:{
lineStyle:{
type:'dashed',
color:"#FFFFFF"
}
},
splitLine:{
show:false,//网格是否显示
interval: 0,
lineStyle:{
type:'dashed'
}
},
axisLabel: {
show: true,
interval: 2,
textStyle: {
color: '#fff'
}
},
data : chartData.data3.x
},
{
gridIndex: 0,//定义图标所在位置，不给默认为0，即第一个，而且必须按照从小到大的
type : 'category',
position:'top',
axisLine:{
lineStyle:{//坐标轴颜色
type:'dashed',
}
},
splitLine:{
show:false,//网格是否显示
interval: 0,
lineStyle:{
type:'dashed'
}
},
// axisLabel: {
// show: true,
// textStyle: {
// color: '#fff'
// }
// },
// data : chartData.data1.x
},{
gridIndex: 1,
type : 'category',
position:'top',
axisLine:{
lineStyle:{
type:'dashed',
color:"#FFFFFF"
}
},
splitLine:{
show:false,//网格是否显示
interval: 0,
lineStyle:{
type:'dashed'
}
},
// axisLabel: {
// show: true,
// textStyle: {
// color: '#fff'
// }
// },
// data : chartData.data2.x
},{
gridIndex: 2,
type : 'category',
position:'top',
axisLine:{
lineStyle:{
type:'dashed',
color:"#FFFFFF"
}
},
splitLine:{
show:false,//网格是否显示
interval: 0,
lineStyle:{
type:'dashed'
}
},
// axisLabel: {
// show: true,
// textStyle: {
// color: '#fff'
// }
// },
// data : chartData.data3.x
}],
yAxis : [{
type : 'value',
axisLabel:{
formatter:'{value}',
show: true,
textStyle: {
color: '#fff'
}
},
axisLine:{
lineStyle:{
type:'dashed'
}
},
splitNumber:5,
splitLine:{
show:true,
lineStyle:{
type:'dashed'
}
},
yAxisIndex:0,
min:0,
max:getMax(chartData.data1.y)
},
{
gridIndex: 1,
type : 'value',
axisLabel:{
formatter:'{value}',
show: true,
textStyle: {
color: '#fff'
}
},
axisLine:{
lineStyle:{
type:'dashed'
}
},
splitNumber:5,
splitLine:{
show:true,
lineStyle:{
type:'dashed'
}
},
min:0,
max:getMax(chartData.data2.y)
},
{
gridIndex: 2,
type : 'value',
axisLabel:{
formatter:'{value}',
show: true,
textStyle: {
color: '#fff'
}
},
axisLine:{
lineStyle:{
type:'dashed'
}
},
splitNumber:5,
splitLine:{
show:true,
lineStyle:{
type:'dashed'
}
},
min:0,
max:getMax(chartData.data3.y)
}
,{
type : 'value',
gridIndex: 0,
position:'right',
axisLine:{
lineStyle:{
type:'dashed',
color:"#FFFFFF"
}
},
},
{
gridIndex: 1,
type : 'value',
position:'right',
axisLine:{
lineStyle:{
type:'dashed',
color:"#FFFFFF"
}
},
},{
gridIndex: 2,
type : 'value',
position:'right',
axisLine:{
lineStyle:{
type:'dashed',
color:"#FFFFFF"
}
},
}
],
series : [
{
name:chartData.data1.name,
type:'line',
smooth:true,
showAllSymbol: true,
data:chartData.data1.y
},
{
name:chartData.data2.name,
type:'line',
smooth:true,
yAxisIndex:1,
xAxisIndex:1,
showAllSymbol: true,
data:chartData.data2.y
},
{
name:chartData.data3.name,
type:'line',
smooth:true,
yAxisIndex:2,
xAxisIndex:2,
showAllSymbol: true,
data:chartData.data3.y
}
]
});
if(allProvinceNames[0].indexOf(chartData.titleData.province)==-1){
analysis_type = 'province'
choseProvince=chartData.titleData.province
$('.right_info_box_button').removeClass('notAllowed').removeClass('analysisBackgroundNot')
}
return myChart;
}转载自：https://blog.csdn.net/this_tall_people/article/details/78853576
