|
关于echarts图表的问题，有时方便有时麻烦，方便是方便在我们能立马使用到找到自己的图表，麻烦是麻烦在自己的图表的细节问题在修改中不知道怎么修改。这次我用项目中运用到的代码，来讲一下。
在运用echarts图的时候，首先你要引用这个文件 echarts.js.在官网上找到你需要的图形，引用到文件，就可以实现你的图表样式了。
在前几次的项目中遇到过的问题，比如在地图上面显示信息，这个时候，你需要在require中把数据给定义出来，然后在option中的tooltip中formatter里面定义函数，函数使用循环遍历，把数据给遍历出来，然后就可以显示了。下面是上面所说的代码。
require(
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('china'));
var ecConfig = require('echarts/config');
function eConsole(param) {
var name = param.name;
var url = "3100.html"; //要转的页面
window.open(url,"newwindow");
}
var $imgs = [
{area: '北京', url:'/logo2.png', num:0,all:0,top:0},
{area: '北京', url:'/logo2.png', num:0,all:1000,top:1000},
{area: '天津', url:'/logo3.png', num:1000,all:100,top:1000},
{area: '上海', url:'/logo2.png', num:1000,all:10000,top:1000},
{area: '重庆', url:'/logo3.png', num:1000,all:1000,top:1000},
{area: '河北', url:'/logo3.png', num:1000,all:44000,top:1000},
{area: '河南', url:'/logo3.png', num:1000,all:41000,top:1000},
{area: '云南', url:'/logo2.png', num:10,all:40000,top:10},
{area: '辽宁', url:'/logo3.png', num:10,all:300,top:10},
{area: '黑龙江', url:'/logo3.png', num:10,all:300,top:10},
{area: '湖南', url:'/logo3.png', num:10,all:30000,top:10},
{area: '安徽', url:'/logo2.png', num:10,all:40000,top:10},
{area: '山东', url:'/logo3.png', num:10,all:40000,top:10},
{area: '新疆', url:'/logo3.png', num:10,all:40000,top:10},
{area: '江苏', url:'/logo3.png', num:10,all:300,top:10},
{area: '浙江', url:'/logo2.png', num:10,all:300,top:10},
{area: '江西', url:'/logo3.png', num:10,all:300,top:10},
{area: '湖北', url:'/logo2.png', num:10,all:300,top:10},
{area: '广西', url:'/logo3.png', num:10,all:300,top:10},
{area: '甘肃', url:'/logo3.png', num:10,all:300,top:10},
{area: '山西', url:'/logo3.png', num:10,all:300,top:10},
{area: '内蒙古', url:'/logo3.png', num:1000,all:300000,top:1000},
{area: '陕西', url:'/logo3.png', num:10,all:300000,top:10},
{area: '吉林', url:'/logo3.png', num:10,all:300,top:10},
{area: '福建', url:'/logo2.png', num:10,all:300,top:10},
{area: '贵州', url:'/logo3.png', num:10,all:300,top:10},
{area: '广东', url:'/logo2.png', num:10,all:30000,top:10},
{area: '青海', url:'/logo2.png', num:10,all:300,top:10},
{area: '西藏', url:'/logo3.png', num:10,all:30000,top:10},
{area: '四川', url:'/logo3.png', num:10, num:10,all:300,top:10},
{area: '宁夏', url:'/logo2.png', num:10,all:300,top:10},
{area: '海南', url:'/logo3.png', num:10,all:300,top:10},
{area: '台湾', url:'/logo3.png', num:10,all:300,top:10},
{area: '香港', url:'/logo3.png', num:10,all:300,top:10},
{area: '澳门', url:'/logo3.png', num:10,all:3000,top:10}
];
)
这是数据的一部分，接下来是怎样调取数据
tooltip : {
trigger: 'item',
formatter: function (params,ticket,callback){
var $pna = params.name;
var res = '';
for(var i = 0;i<$imgs.length;i++){
if($imgs[i].area == $pna){
res = "<span style='color:#2f79c4;'>"+ $pna +"</span><br /><span style='color:#fff;'>上个月治理车辆：<span style='color:#cb3227;'>"+$imgs[i].num+"</span>辆</span><br /><span style='color:#fff;'>全年治理车辆：<span style='color:#cb3227;'>"+$imgs[i].all +"</span>辆</span><br /><span style='color:#fff;'>全国排名：第<span style='color:#cb3227;'>"+ $imgs[i].top +"</span>名</span>";//设置自定义数据的模板，这里的模板是图片
//console.log(res);
break;
}
}
setTimeout(function (){
// 仅为了模拟异步回调
callback(ticket, res);//回调函数，这里可以做异步请求加载的一些代码
}, 1000)
return 'loading';
}
}
这个tooltip是在小弹窗中显示的内容，函数里面循环的内容就是小窗的内容。
|
