项目中 使用到的echart 这个图我是纠结了一天,然后又花时间实践了一天,最后才有点头续
单单看图的话,会觉得好简单啊 有什么困难的
请听需求:
1.此图要随着网页大小改变而改变;
2.这个是显示前10名的值
为什么包了这么多层 都是有原因的啊 哭泣
地图部分就不贴代码了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body,html{
width: 100%;
height: 100%;
background: #f1f1f1;
}
</style>
</head>
<body>
<div style="width: 40%;height: 30%;display: inline-block;position:relative;overflow: hidden;background: #fff;padding: 10px;">
<div style="width:55%;display: inline-block;margin-left:9%;height:80%;background:#f1f1f1;">我是地图</div>
<div style="width: 30%;height:90%;display: inline-block ;position: absolute;top:10%; margin-left: 2%;">
<h4 style="margin-bottom:8px;margin-top:0;font-size: 14px;color: #4b4c4c;">top10</h4>
<div id="wrap" style="height: 100%;width: 100%;position: relative;">
<div id="topNum" style="display: inline-block;width: 10%;height: 80%;"></div>
<div id="topName" style="width: 30%;height: 80%;;display: inline-block;position:absolute;font-size: 12px;"></div>
<div id="topCanvas" style="display: inline-block;width: 80%;height: 80%;"></div>
<div id="borderBottom" style="position: absolute;width: 95%;height: 100%;top: 0; border-top: 1px solid #edf0f3;">
</div>
</div>
</div>
</div>
<script src="../jquery-1.8.3.js"></script>
<script src="echarts.min.js"></script>
<script>
var data = {
"allAmount":[
{
"name":"浙江",
"value":9944
},
{
"name":"山东",
"value":6200
},
{
"name":"北京",
"value":3100
},
{
"name":"天津",
"value":3000
},
{
"name":"河北",
"value":3
},
{
"name":"山西",
"value":8000
},
{
"name":"内蒙古",
"value":-1
},
{
"name":"辽宁",
"value":-1
},
{
"name":"吉林",
"value":-1
},
{
"name":"黑龙江",
"value":-1
},
{
"name":"上海",
"value":-1
},
{
"name":"江苏",
"value":-1
},
{
"name":"安徽",
"value":-1
},
{
"name":"福建",
"value":-1
},
{
"name":"江西",
"value":-1
},
{
"name":"河南",
"value":-1
},
{
"name":"湖北",
"value":-1
},
{
"name":"湖南",
"value":-1
},
{
"name":"广东",
"value":-1
},
{
"name":"广西",
"value":-1
},
{
"name":"海南",
"value":-1
},
{
"name":"重庆",
"value":-1
},
{
"name":"四川",
"value":-1
},
{
"name":"贵州",
"value":-1
},
{
"name":"云南",
"value":-1
},
{
"name":"西藏",
"value":-1
},
{
"name":"陕西",
"value":-1
},
{
"name":"甘肃",
"value":-1
},
{
"name":"青海",
"value":-1
},
{
"name":"宁夏",
"value":-1
},
{
"name":"新疆",
"value":-1
},
{
"name":"台湾",
"value":-1
},
{
"name":"香港",
"value":-1
},
{
"name":"澳门",
"value":-1
}
],
"localCount":"0"
}
getAllMount()
function getAllMount(){
var html2 = "";
//因为是top10所以选择前十个,即使value=-1也没关系 主要是占位 要不然前面的 1 2 3 这种不好添加
var provinceTop10 = [];
for(var i=0;i<data.allAmount.length;i++){
if(i<10){
provinceTop10.push(data.allAmount[i]);
}else{
break;
}
}
//记录value 不为 -1的数组
var provinceTop10Arry = [];
//记录value 不为 -1的数组 的长度
var provinceTop10Index = ""
for(var i=0;i<provinceTop10.length;i++){
//value为-1时候 把name和value都为空 就像是隐藏了一样
if(provinceTop10[i].value == "-1"){
provinceTop10[i].value = '';
provinceTop10[i].name = '';
}else{
provinceTop10Arry.push(provinceTop10[i].value)
}
}
provinceTop10Index = provinceTop10Arry.length;
var html3 = "";
var num = ""
for(var i = provinceTop10.length-1;i >= 0;i--){
num = 10-i;
//value != -1 的显示
if(num <= provinceTop10Index ){
//前三名的颜色
if(num<=3){
html3 += '<div style="position: relative;height:9.9%;"><div style="white-space:nowrap;color:#808080; text-align: center; position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%); "> <p style=" font-size:8px;-webkit-transform:scale(0.8);padding: 0 3px;margin: 0;background: #57a6ff;color:#fff">'+num+'</p></div></div>'
}else{
html3 += '<div style="position: relative;height:9.9%;"><div style="white-space:nowrap;color:#808080; text-align: center; position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%); "> <p style=" font-size:8px;-webkit-transform:scale(0.8);padding: 0 3px;margin: 0;background: #99b4d3;color:#fff">'+num+'</p></div></div>'
}
}else{
html3 += '<div style="position: relative;height:9.5%;"><div style="white-space:nowrap;color:#808080; text-align: center; position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%); "> <p style=" font-size:8px;-webkit-transform:scale(0.8);padding: 0;margin: 0;"></p></div></div>'
}
}
$("#topNum").html(html3);
//设置下边框
var html4 = "";
for(var i = 0;i<provinceTop10Index;i++){
html4 += '<div style="border-bottom: 1px solid #edf0f3;height: 8%;"></div>'
}
$("#borderBottom").html(html4);
var html = "";
for(var i = 0;i< provinceTop10.length-1;i++){
var itemName = "";
itemName = provinceTop10[i].name;
html += '<div style="position: relative;height:9.8%;"><div style="white-space:nowrap;color:#808080; text-align: center; position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%); title="'+itemName+'"> <p style=" font-size:8px;-webkit-transform:scale(0.8);padding: 0;margin: 0;">'+itemName+'</p></div></div>'
}
$("#topName").html(html);
for(var i=0;i<provinceTop10.length;i++){
if(provinceTop10.value == -1){
}
}
var provinceTop10Name=[];
for(var i=0;i<provinceTop10.length;i++){
provinceTop10Name.push(provinceTop10[i].name);
}
var provinceTop10Value=[];
for(var i=0;i<provinceTop10.length;i++){
provinceTop10Value.push(provinceTop10[i].value)
}
var provinceTop10List={}
provinceTop10List.provinceTop10Name = provinceTop10Name;
provinceTop10List.provinceTop10Value = provinceTop10Value;
initChinaTopChart(provinceTop10List)
}
function initChinaTopChart(data) {
var myChart = echarts.init(document.getElementById('topCanvas'));
var typeOption = {
title: {
show: false,
},
grid: {
left: '0',
right: '-10px',
bottom: '10',
top:"-20px",
containLabel: true
},
xAxis: [
{
type: 'value',
position: 'top',
axisLine: {
lineStyle:{
color: '#e5e5e5',
width: 1,
},
show:false,
},
axisTick:{
show:false,
},
axisLabel:{//坐标轴文字
show:false
},
// minInterval:1,
splitLine:{//网格线的格式
show:false,//去掉x轴上的网格线——
lineStyle:{
color: '#e5e5e5',//网格线颜色
width: 1,//网格线宽度
type: 'dashed'//网格线样式
}
},
}
],
yAxis: [
{
type: 'category',
data:data.provinceTop10Name,
inverse:true,//倒置y轴数据
axisLine: {
show:false,
},
minInterval:1,
splitLine:{//网格线的格式
// show:true,//去掉x轴上的网格线——
lineStyle:{
color: '#e5e5e5',//网格线颜色
width: 1,//网格线宽度
}
},
axisTick: {//刻度相关
// alignWithLabel: true,//保证刻度线和标签对齐
length:40,
lineStyle:{
color:"#e5e5e5",
},
show:false,
},
boundaryGap:true,
axisLabel:{//坐标轴文字
color:"#666666",
fontFamily:"Arial",
margin:60,
show:false,
},
}
],
series: [
{
name: '当前资源',
type: 'bar',
stack: '总量',
roam:true,
barWidth: 8,
data:data.provinceTop10Value,
itemStyle: {
normal: {
color: function(params) {
//首先定义一个数组
var colorList = [
'#57a5fe','#57a5fe','#57a5fe','#95afce','#95afce','#95afce','#95afce','#95afce','#95afce','#95afce'
];
return colorList[params.dataIndex]
}
}
},
//?????颜色??
label: {
normal: {
show: true,
position: "left",
color:"#666666",
fontFamily:"Arial",
// formatter:'{c}'
},
},
}]
};
window.onresize = myChart.resize;
myChart.setOption(typeOption);
};
</script>
</body>
</html>下面图就是完成效果
这个标签文字不知道为什么和柱状图的颜色一样,我在项目里面也是这样写的,但是文字标签颜色就是我设置的#666的颜色 就像第一个图