配置Echarts大全
由于项目中需要用到Echarts，最近研究了一个星期。网上的教程也挺多的。磕磕碰碰的，难找到合适的例子。都说的马马虎虎。不废话了。开始吧。
这种上下排列的。。。
还有这种地图的。（如下）
还有就是配置的问题。（从echarts官网看例子。但是不能直接打开。如何在本地打开。）
我研究了一套非常好的配置方案。如下。
1.准备一个盒子，<div id="main1" style="width: 1600px;height:400px;"></div>
2.引入js 。 <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
3 .
// 路径配置开始
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 路径配置结束
// 使用柱状图就加载bar模块，按需加载
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line'
],
drawEcharts
);
4
// 函数调用
function drawEcharts(ec){
drawBar(ec);
drawBar2(ec);
drawBar3(ec);
drawBar4(ec);
你在一个页面中，弄了几个echarts图表。 你就弄几个函数。
}
5. 具体的函数。
函数一： function drawBar(ec){
var myBarChart = ec.init(document.getElementById('main1'));
var option = {}
myBarChart.setOption(option,true);
}
函数二：。。。。。。。。。。。。可以写n个。记得调用。然后html里弄n个盒子。一个盒子对应一个函数。这就是整体怎么使用的。
难点二。怎么给柱子添加点击跳转。下面是公司给的设计稿。
点击柱子。跳转到指定页面。
在你做的drawBar函数内部。加上如下代码
var ecConfig = require('echarts/config');
function eConsole(param) {
switch (param.dataIndex) {
case 0: //柱子1
window.location.href = "stSubject.html";
break;
case 1: //柱子2
window.location.href = "stSubject.html";
break;
case 2: //柱子3
window.location.href = "stSubject.html";
break;
case 3: //柱子3
window.location.href = "stSubject.html";
break;
case 4: //柱子3
window.location.href = "stSubject.html";
break;
case 5: //柱子3
window.location.href = "stSubject.html";
break;
default:
break;
}
}
myBarChart.on(ecConfig.EVENT.CLICK, eConsole);
就实现了跳转。
完整代码如下。复制到本地，既可看到效果。（b不需要你下载任何js库）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/reset.css" rel="stylesheet">
<link href="css/tongji.css" rel="stylesheet" >
</head>
<body>
<div class="statistcs"> <div class="content clearfix">
<div class="right-box fl right-box1">
<div class="item item1" id="item1"><div id="main1" style="width: 1600px;height:400px;"></div></div> </div>
</div>
</div>
<!-- <script src="js/bootstrap.js"></script> -->
<!-- <script src="js/jquery.js"></script> -->
<!-- <script src="js/echarts.js"></script> -->
<!-- <script src="js/common.js"></script> -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script>
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用柱状图就加载bar模块，按需加载
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line'
],
drawEcharts
);
// 函数调用
function drawEcharts(ec){
drawBar(ec);
}
function drawBar(ec){
var myBarChart = ec.init(document.getElementById('main1'));
var option = {
color:['#1f67df'],
// default:[ false ],
title: {
show:true,
left:'50%',
backgroundColor:'transparent',//标题的背景颜色
text: '作业量',
},
grid:{
show:true,
left:'10%',
containLabel:true,
backgroundColor:"#fff",
},
tooltip: {},
// legend: {},
xAxis : [
{
splitLine:{show: true},//去除网格线
type : 'category',
data: ["五班","八班","十六班","","","","","","","","","",""],
// splitArea : {show : true}//保留网格区域
}
],
yAxis : [
{
splitLine:{show: true},//去除网格线
type : 'value',
// splitArea : {show : true}//保留网格区域
}
],
series: [{
name: '作业量',
type: 'bar',
// barWidth:"30%",
data: [, , , , , , , , , , , , ]
}]
};
myBarChart.setOption(option,true); /* 给柱状图绑定click事件 */
var ecConfig = require('echarts/config');
function eConsole(param) {
switch (param.dataIndex) {
case : //柱子1
window.location.href = "https://www.baidu.com/";
break;
case : //柱子2
window.location.href = "https://www.baidu.com/";
break;
case : //柱子3
window.location.href = "https://www.baidu.com/";
break;
case : //柱子3
window.location.href = "https://www.baidu.com/";
break;
case : //柱子3
window.location.href = "https://www.baidu.com/";
break;
case : //柱子3
window.location.href = "https://www.baidu.com/";
break; default:
break;
}
}
myBarChart.on(ecConfig.EVENT.CLICK, eConsole);
/* 给柱状图绑定click事件 */
}
</script>
这样。就能实现跳转啦。
难点二。如何把官网的例子在本地运行。
1 准备盒子。<div id="main" style="width: 1200px;height:800px;"></div>
2 引入这两个js 。。china.js是地图。务必引入。
<script src="js/echarts.js"></script>
<script src="js/china.js"></script>
2.5 或者可以引入china.json
这个需要配置如下代码：
//引入json地图
// $.get('json/china.json', function (chinaJson) {
// echarts.registerMap('china', chinaJson);
// });
3步：var myChart = echarts.init(document.getElementById('main'));
4部。就是把下载过来的代码粘贴到js中
官网的数据一般是这样的：
var data = []
var geoCoordMap =[]
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
var convertedData = [
convertData(data),
convertData(data.sort(function(a, b) {
return b.value - a.value;
}).slice(0, 6))
];
data.sort(function(a, b) {
return a.value - b.value;
})
var selectedItems = [];
var categoryData = [];
var barData = [];
// var maxBar = 30;
var sum = 0;
var count = data.length;
for (var i = 0; i < data.length; i++) {
categoryData.push(data[i].name);
barData.push(data[i].value);
sum += data[i].value;
}
console.log(categoryData);
console.log(sum + " " + count)
option = {
backgroundColor: '#404a59',
animation: true,
animationDuration: 1000,
animationEasing: 'cubicInOut',
animationDurationUpdate: 1000,
animationEasingUpdate: 'cubicInOut',
title: [{
text: '全国用电量对比',
link: 'http://pages.anjuke.com/expert/newexpert.html',
subtext: 'data from Anjuke',
sublink: 'http://pages.anjuke.com/expert/newexpert.html',
left: 'center',
textStyle: {
color: '#fff'
}
}, {
id: 'statistic',
text: count ? '平均: ' + parseInt((sum / count).toFixed(4)) : '',
right: 120,
top: 40,
width: 100,
textStyle: {
color: '#fff',
fontSize: 16
}
}],
toolbox: {
iconStyle: {
normal: {
borderColor: '#fff'
},
emphasis: {
borderColor: '#b1e4ff'
}
},
feature: {
dataZoom: {},
brush: {
type: ['rect', 'polygon', 'clear']
},
saveAsImage: {
show: true
}
}
},
brush: {
outOfBrush: {
color: '#abc'
},
brushStyle: {
borderWidth: 2,
color: 'rgba(0,0,0,0.2)',
borderColor: 'rgba(0,0,0,0.5)',
},
seriesIndex: [0, 1],
throttleType: 'debounce',
throttleDelay: 300,
geoIndex: 0
},
geo: {
map: 'china',
left: '10',
right: '35%',
center: [117.98561551896913, 31.205000490896193],
zoom: 1.5,
label: {
emphasis: {
show: false
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
tooltip: {
trigger: 'item'
},
grid: {
right: 40,
top: 100,
bottom: 40,
width: '30%'
},
xAxis: {
type: 'value',
scale: true,
position: 'top',
boundaryGap: false,
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
margin: 2,
textStyle: {
color: '#aaa'
}
},
},
yAxis: {
type: 'category',
// name: 'TOP 20',
nameGap: 16,
axisLine: {
show: true,
lineStyle: {
color: '#ddd'
}
},
axisTick: {
show: false,
lineStyle: {
color: '#ddd'
}
},
axisLabel: {
interval: 0,
textStyle: {
color: '#ddd'
}
},
data: categoryData
},
series: [{
// name: 'pm2.5',
type: 'scatter',
coordinateSystem: 'geo',
data: convertedData[0],
symbolSize: function(val) {
return Math.max(val[2] / 300, 8);
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#FF8C00',
position: 'right',
show: true
}
}
}, {
// name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertedData[0],
symbolSize: function(val) {
return Math.max(val[2] / 500, 8);
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 50,
shadowColor: '#EE0000'
}
},
zlevel: 1
}, {
id: 'bar',
zlevel: 2,
type: 'bar',
symbol: 'none',
itemStyle: {
normal: {
color: '#ddb926'
}
},
data: data
}]
};
function renderBrushed(params) {
var mainSeries = params.batch[0].selected[0];
var selectedItems = [];
var categoryData = [];
var barData = [];
var maxBar = 30;
var sum = 0;
var count = 0;
for (var i = 0; i < mainSeries.dataIndex.length; i++) {
var rawIndex = mainSeries.dataIndex[i];
var dataItem = convertedData[0][rawIndex];
var pmValue = dataItem.value[2];
sum += pmValue;
count++;
selectedItems.push(dataItem);
}
selectedItems.sort(function(a, b) {
// return b.value[2] - a.value[2];
return a.value - b.value;
});
for (var i = 0; i < Math.min(selectedItems.length, maxBar); i++) {
categoryData.push(selectedItems[i].name);
barData.push(selectedItems[i].value[2]);
}
this.setOption({
yAxis: {
data: categoryData
},
xAxis: {
axisLabel: {
show: !!count
}
},
title: {
id: 'statistic',
text: count ? '平均: ' + (sum / count).toFixed(4) : ''
},
series: {
id: 'bar',
// sort:'descending',
data: barData
}
});
}
最后。
myChart.setOption(option)
下面是整个代码。（复制到本地就能运行）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入 ECharts 文件 -->
<script src="js/echarts.js"></script>
<script src="js/china.js"></script>
<script src="js/jquery-1.9.1.js"></script> </head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 1200px;height:800px;"></div>
<script type="text/javascript">
//引入json地图
// $.get('json/china.json', function (chinaJson) {
// echarts.registerMap('china', chinaJson);
// });
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var data = [
{ name: "上海", value: },
{ name: "珠海", value: },
{ name: "三亚", value: },
{ name: "惠州", value: },
{ name: "海口", value: },
{ name: "合肥", value: },
{ name: "南京", value: },
{ name: "杭州", value: },
{ name: "苏州", value: },
{ name: "无锡", value: },
{ name: "昆山", value: },
{ name: "广州", value: },
{ name: "深圳", value: },
{ name: "佛山", value: },
{ name: "东莞", value: },
{ name: "福州", value: },
{ name: "厦门", value: },
{ name: "南宁", value: },
{ name: "郑州", value: },
{ name: "武汉", value: },
{ name: "长沙", value: },
{ name: "南昌", value: },
{ name: "北京", value: },
{ name: "长春", value: },
{ name: "大连", value: },
{ name: "沈阳", value: },
{ name: "哈尔滨", value: },
{ name: "天津", value: },
{ name: "济南", value: },
{ name: "青岛", value: },
{ name: "太原", value: },
{ name: "石家庄", value: },
{ name: "西安", value: },
{ name: "成都", value: },
{ name: "重庆", value: },
{ name: "昆明", value: }, ]; var geoCoordMap = {
"上海": [121.48, 31.22],
"珠海": [113.52, 22.3],
"三亚": [109.31, 18.14],
"惠州": [114.4, 23.09],
"海口": [110.35, 20.02],
"合肥": [117.27, 31.86],
"南京": [118.78, 32.04],
"杭州": [120.19, 30.26],
"苏州": [120.62, 31.32],
"无锡": [120.29, 31.59],
"昆山": [120.95, 31.39],
"广州": [113.23, 23.16],
"深圳": [114.07, 22.62],
"佛山": [113.11, 23.05],
"东莞": [113.75, 23.04],
"福州": [119.3, 26.08],
"厦门": [118.1, 24.46],
"南宁": [108.33, 22.84],
"郑州": [113.65, 34.76],
"武汉": [114.31, 30.52],
"长沙": [, 28.21],
"南昌": [115.89, 28.68],
"北京": [116.46, 39.92],
"长春": [125.35, 43.88],
"大连": [121.62, 38.92],
"沈阳": [123.38, 41.8],
"哈尔滨": [126.63, 45.75],
"天津": [117.2, 39.13],
"济南": [, 36.65],
"青岛": [120.33, 36.07],
"太原": [112.53, 37.87],
"石家庄": [114.48, 38.03],
"西安": [108.95, 34.27],
"成都": [104.06, 30.67],
"重庆": [106.54, 29.59],
"昆明": [102.73, 25.04],
}; var convertData = function(data) {
var res = [];
for (var i = ; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
}; var convertedData = [
convertData(data),
convertData(data.sort(function(a, b) {
return b.value - a.value;
}).slice(, ))
];
data.sort(function(a, b) {
return a.value - b.value;
}) var selectedItems = [];
var categoryData = [];
var barData = [];
// var maxBar = 30;
var sum = ;
var count = data.length;
for (var i = ; i < data.length; i++) {
categoryData.push(data[i].name);
barData.push(data[i].value);
sum += data[i].value;
}
console.log(categoryData);
console.log(sum + " " + count)
option = {
backgroundColor: '#404a59',
animation: true,
animationDuration: ,
animationEasing: 'cubicInOut',
animationDurationUpdate: ,
animationEasingUpdate: 'cubicInOut',
title: [{
text: '全国用电量对比',
link: 'http://pages.anjuke.com/expert/newexpert.html',
subtext: 'data from Anjuke',
sublink: 'http://pages.anjuke.com/expert/newexpert.html',
left: 'center',
textStyle: {
color: '#fff'
}
}, {
id: 'statistic',
text: count ? '平均: ' + parseInt((sum / count).toFixed()) : '',
right: ,
top: ,
width: ,
textStyle: {
color: '#fff',
fontSize:
}
}],
toolbox: {
iconStyle: {
normal: {
borderColor: '#fff'
},
emphasis: {
borderColor: '#b1e4ff'
}
},
feature: {
dataZoom: {},
brush: {
type: ['rect', 'polygon', 'clear']
},
saveAsImage: {
show: true
}
}
},
brush: {
outOfBrush: {
color: '#abc'
},
brushStyle: {
borderWidth: ,
color: 'rgba(0,0,0,0.2)',
borderColor: 'rgba(0,0,0,0.5)',
},
seriesIndex: [, ],
throttleType: 'debounce',
throttleDelay: ,
geoIndex:
},
geo: {
map: 'china',
left: '',
right: '35%',
center: [117.98561551896913, 31.205000490896193],
zoom: 1.5,
label: {
emphasis: {
show: false
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
tooltip: {
trigger: 'item'
},
grid: {
right: ,
top: ,
bottom: ,
width: '30%'
},
xAxis: {
type: 'value',
scale: true,
position: 'top',
boundaryGap: false,
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
margin: ,
textStyle: {
color: '#aaa'
}
},
},
yAxis: {
type: 'category',
// name: 'TOP 20',
nameGap: ,
axisLine: {
show: true,
lineStyle: {
color: '#ddd'
}
},
axisTick: {
show: false,
lineStyle: {
color: '#ddd'
}
},
axisLabel: {
interval: ,
textStyle: {
color: '#ddd'
}
},
data: categoryData
},
series: [{
// name: 'pm2.5',
type: 'scatter',
coordinateSystem: 'geo',
data: convertedData[],
symbolSize: function(val) {
return Math.max(val[] / , );
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#FF8C00',
position: 'right',
show: true
}
}
}, {
// name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertedData[],
symbolSize: function(val) {
return Math.max(val[] / , );
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: ,
shadowColor: '#EE0000'
}
},
zlevel:
}, {
id: 'bar',
zlevel: ,
type: 'bar',
symbol: 'none',
itemStyle: {
normal: {
color: '#ddb926'
}
}, data: data
}]
}; function renderBrushed(params) {
var mainSeries = params.batch[].selected[]; var selectedItems = [];
var categoryData = [];
var barData = [];
var maxBar = ;
var sum = ;
var count = ; for (var i = ; i < mainSeries.dataIndex.length; i++) {
var rawIndex = mainSeries.dataIndex[i];
var dataItem = convertedData[][rawIndex];
var pmValue = dataItem.value[]; sum += pmValue;
count++; selectedItems.push(dataItem);
} selectedItems.sort(function(a, b) {
// return b.value[2] - a.value[2];
return a.value - b.value;
}); for (var i = ; i < Math.min(selectedItems.length, maxBar); i++) {
categoryData.push(selectedItems[i].name);
barData.push(selectedItems[i].value[]);
} this.setOption({
yAxis: {
data: categoryData
},
xAxis: {
axisLabel: {
show: !!count
}
},
title: {
id: 'statistic',
text: count ? '平均: ' + (sum / count).toFixed() : ''
},
series: {
id: 'bar',
// sort:'descending',
data: barData
}
});
}
myChart.setOption(option)
</script>
</body>
</html>
配置Echarts大全的更多相关文章
- 关于vue中如何配置echarts以及使用方法
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) ...
- 知识点4: 配置echarts折线图和饼图
折线图 效果图 html <template> <div id="v11-charts3"></div> </template> j ...
- webpack 配置echarts 按需加载
引入babel-plugin-equire插件,方便使用.yarn add babel-plugin-equire -D 在.babelrc文件中的配置 { "presets": ...
- asp.net中web.config配置节点大全详解
最近网上找了一些关于Web.config配置节点的文章,发现很多都写的都比较零散,而且很少有说明各个配置节点的作用和用法.搜索了一下发现有一篇写的不错,这里引用一下 原文地址 http://www.c ...
- AndroidManifest.xml 配置权限大全
问登记属性 android.permission.ACCESS_CHECKIN_PROPERTIES ,读取或写入登记check-in数据库属性表的权限 获取错略位置 android.permissi ...
- asp.net中web.config配置节点大全详解【转】
web.config 文件查找规则: (1)如果在当前页面所在目录下存在web.config文件,查看是否存在所要查找的结点名称,如果存在返回结果并停止查找. (2)如果当前页面所在目录下不存在web ...
- 自制OSPF配置实验大全
OSPF综合实验(gns模拟器) 注意点: Ospf实验推荐用gns制作 //图中的交换机可以视觉忽略或缩小成一个点.(^ v^) Ospf 实验拓扑图 目录 OSPF综合实验... 1 Os ...
- 自制EIGRP配置实验大全
EIGRP综合实验 本实验可能会有一两个出错的地方,希望大家进行实验测试后,可以指正!当然绝大部分都是正确滴! 实验A:基本配置 A.0)实验目的: 熟悉eigrp的基本配置 A.1)实验拓扑: A. ...
- consul配置参数大全、详解、总结
命令行选项 以下选项全部在命令行中指定. -advertise - 通告地址用于更改我们通告给集群中其他节点的地址.默认情况下,-bind地址是通告的.但是,在某些情况下,可能存在无法绑定的可路由地址 ...
随机推荐
- OSGi Bundle
OSGi Framework looks like OS, Bundle looks like program, OS can create a process to run program with ...
- .NET开源工作流RoadFlow-表单设计-日期时间选择
在表单中添加一个日期时间选择框: 选择范围:指定一个日期选择范围. 时间:是否允许选择时间.
- linux常用指令集-持续更新...
0.查看所有java进程GC情况:for i in `jps|egrep -v "Jps|Launcher" |cut -d" " -f1`;do pwdx $ ...
- Ruby系列文章之1---开发者应该熟悉的10个工具
1. Git Git是进入Ruby这个生态圈首先最应该学会的工具.几乎所有以Ruby开发出来的套件都放在Github上.也就是不管你要下载或修改协作都需要透过Git. 2. RVM Ruby有很多种i ...
- HCNA配置手工负载分担模式链路聚合
一.配置手工负载分担模式链路聚合 链路聚合(Link Aggregation)是将—组物理接口捆绑在一起作为一个逻辑接口来增加带宽的一种方法,又称为多接口负载均衡组(Load Sharing Grou ...
- CentOS7 查询已安装的包方便整理 /卸载
以PHP为例.首先查看已安装的PHP rpm -qa |grep php 输出结果: php-cli--.el7.x86_64 php-common--.el7.x86_64 查询rpm包的安装时间和 ...
- 如何读写json文件
代码如下: import java.io.BufferedReader; import java.io.File; import java.io.FileReader; import java.io. ...
- [转]查找问题的利器 - Git Bisect
转自:http://gitbook.liuhui998.com/5_4.html 假设你在项目的'2.6.18'版上面工作, 但是你当前的代码(master)崩溃(crash)了. 有时解决这种问题的 ...
- [转]Ubuntu 小企鹅输入法fcitx 支持 五笔拼音
之前在Ubuntu下使用ibus五笔输入法,用了一段时间发现五笔输入法不能输入词组,并且五笔不支持拼音的功能,从网上找到可以使用fcitx替换掉ibus,因此自已尝试了一把,安装步骤如下: 1. 安装 ...
- Ajax系列之三：UpdatePanel
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/zhanghongjie0302/article/details/35609691 ...