首页地图渲染之国际化(三)---趋势图联动显示
来源：互联网 发布：java企业门户网站源码 编辑：程序博客网 时间：2024/06/06 10:44
实现效果
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; }阅读全文
0 0
- 首页地图渲染之国际化(三)---趋势图联动显示
- 首页地图渲染之国际化(一)
- 首页地图渲染之国际化(二)---地图操作
- 渲染地图图层
- 地图渲染之Clusterer聚集
- 百度地图之显示地图
- 电子商务国际化是趋势
- QGIS开发之地图渲染与打印
- 地图渲染
- D3D11地形渲染教程三之高度图(HeightMap)
- 天津政府应急系统之GIS一张图（arcgis api for flex）讲解（三）显示地图坐标系模块
- Android百度地图之显示地图
- AndroidStudio百度地图开发之显示地图
- SpringMVC之国际化资源显示错误信息
- 百度地图BaiduMap--学习（三）------让自己的位置显示在地图上之“火星差”
- Openlayers之地图全屏显示
- Leaflet入门之地图显示
- Blog小技巧之三-在地图上显示访问Blog读者的分布信息
- Sublime Text 3 调教你的私人利器（下）
- 对map里的数据进行排序
- 重磅开源！678页阿里核心技术，免费下载！
- 图像映射（图像热点）的使用
- java中equals方法的用法以及==的用法（转）
- 首页地图渲染之国际化(三)---趋势图联动显示
- jquery操作动态生成的元素
- Android研究_Gralloc_4alloc设备open过程分析
- 阿里云“万亿苏醒计划”：AIoT智联网的伟大使命
- web项目抽取BaseDao
- 五大框架
- SQL 语法
- Python 计算彩色图像信噪比
- IntelliJ IDEA之项目热部署设置，解决为什么修改jsp或html页面，需要重启服务才能生效！
