关于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 = ""+ $pna +"
上个月治理车辆："+$imgs[i].num+"辆
全年治理车辆："+$imgs[i].all +"辆
全国排名：第"+ $imgs[i].top +"名";//设置自定义数据的模板，这里的模板是图片
//console.log(res);
break;
}
}
setTimeout(function (){
// 仅为了模拟异步回调
callback(ticket, res);//回调函数，这里可以做异步请求加载的一些代码
}, 1000)
return "loading";
}
}
这个tooltip是在小弹窗中显示的内容，函数里面循环的内容就是小窗的内容。
[js的echarts图的使用方法]js的echarts图的使用部分细节
http://m.bbyears.com/wangyezhizuo/109050.html
推荐访问: