图表插件使用汇总（echarts，highchairts）
1、echarts之饼图显示数字
option={
title: {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data: [
'直接访问',
'邮件营销',
'联盟广告',
'视频广告',
'搜索引擎'
]
},
calculable: true,
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: [
'50%',
'60%'
],
itemStyle: {
normal: {
label: {
show: true,
textStyle: {
fontFamily: 'MicrosoftYaHei',
fontSize: '12',
fontWeight: 'bold'
},
formatter: '{b}: {c}亿元\n{d}%'
},
labelLine: {
show: true
}
}
},
data: [
{
value: 335,
name: '直接访问'
},
{
value: 310,
name: '邮件营销'
},
{
value: 234,
name: '联盟广告'
},
{
value: 135,
name: '视频广告'
},
{
value: 1548,
name: '搜索引擎'
}
]
}
]
}
主要是itemStyle：属性设置
2、绑定事件
1) 模块化引入（echarts.js）
var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.CLICK, function(param){
// to-do
});
2) 单一文件引入 （echarts-all.js）
myChart.on('click', function(param){ // ecConfig.EVENT.CLICK无非就是个常量而已
// to-do
});
3、地图-echarts显示地图
1.echarts官网上下载：http://echarts.baidu.com/doc/example.html
怎么在jsp里面使用：
模块化单文件引入：这是百度推荐使用的（不过这里我们用另外一种方式）。
标签式单文件引入：这个跟我们引入普通的js是一样的，下面的讲解主要是以这个方式为主。
自1.3.5开始，ECharts提供标签式引入。如果你的项目本身并不是基于模块化开发的，或者是基于CMD规范（如使用的是seajs），那么引入基于AMD模块化的echarts可能并不方便，我们建议你采用srcipt标签式引入，忘掉require。Srcipt标签引入echarts后将可以直接使用两个全局的命名空间：echarts，zrender，可参考ECharts标签式引入。
需要注意的是excanvas依赖body标签插入Canvas节点去判断Canvas的支持，如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错，解决的办法就是把标签移动到body内（后）。
标签式引入环境中，常用模块的引用可通过命名空间直取，同模块化下的路径结构，如：
echarts.config = require('echarts/config')， zrender.tool.color = require('zrender/tool/color') //from echarts example
<body>
<div id="main" style="height:400px;"></div>
...
<script src="example/www2/js/dist/echarts-all.js"></script>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
...
}
myChart.setOption(option);
</script>
</body>
可以直接引入的单文件如下： dist/echarts-all.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据
source/echarts-all.js : 未压缩，全图表，包含world，china以及34个省市级地图数据，可用于调试
下面这个例子是显示iPhone在中国的销量：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body>
<!--定义页面图表容器-->
<!-- 必须制定容器的大小（height、width） -->
<div id="main" style="width: 98%; height: 500px;border: 1px solid #ccc; padding: 10px;"></div>
<script type="text/javascript" src="../echarts-all.js"></script> 这个就是echarts全部js，直接引入即可。
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
option = {
title : {
text: 'iphone销量',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item'
},
legend: {
orient: 'vertical',
x:'left',
data:['iphone3','iphone4','iphone5']
},
dataRange: {
min: 0,
max: 2500,
x: 'left',
y: 'bottom',
text:['高','低'], // 文本，默认为数值文本
calculable : true
},
toolbox: {
show: true,
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
roamController: {
show: true,
x: 'right',
mapTypeControl: {
'china': true
}
},
series : [
{
name: 'iphone3',
type: 'map',
mapType: 'china',
roam: false,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '北京',value: Math.round(Math.random()*1000)},
{name: '天津',value: Math.round(Math.random()*1000)},
{name: '上海',value: Math.round(Math.random()*1000)},
{name: '重庆',value: Math.round(Math.random()*1000)},
{name: '河北',value: Math.round(Math.random()*1000)},
{name: '河南',value: Math.round(Math.random()*1000)},
{name: '云南',value: Math.round(Math.random()*1000)},
{name: '辽宁',value: Math.round(Math.random()*1000)},
{name: '黑龙江',value: Math.round(Math.random()*1000)},
{name: '湖南',value: Math.round(Math.random()*1000)},
{name: '安徽',value: Math.round(Math.random()*1000)},
{name: '山东',value: Math.round(Math.random()*1000)},
{name: '新疆',value: Math.round(Math.random()*1000)},
{name: '江苏',value: Math.round(Math.random()*1000)},
{name: '浙江',value: Math.round(Math.random()*1000)},
{name: '江西',value: Math.round(Math.random()*1000)},
{name: '湖北',value: Math.round(Math.random()*1000)},
{name: '广西',value: Math.round(Math.random()*1000)},
{name: '甘肃',value: Math.round(Math.random()*1000)},
{name: '山西',value: Math.round(Math.random()*1000)},
{name: '内蒙古',value: Math.round(Math.random()*1000)},
{name: '陕西',value: Math.round(Math.random()*1000)},
{name: '吉林',value: Math.round(Math.random()*1000)},
{name: '福建',value: Math.round(Math.random()*1000)},
{name: '贵州',value: Math.round(Math.random()*1000)},
{name: '广东',value: Math.round(Math.random()*1000)},
{name: '青海',value: Math.round(Math.random()*1000)},
{name: '西藏',value: Math.round(Math.random()*1000)},
{name: '四川',value: Math.round(Math.random()*1000)},
{name: '宁夏',value: Math.round(Math.random()*1000)},
{name: '海南',value: Math.round(Math.random()*1000)},
{name: '台湾',value: Math.round(Math.random()*1000)},
{name: '香港',value: Math.round(Math.random()*1000)},
{name: '澳门',value: Math.round(Math.random()*1000)}
]
},
{
name: 'iphone4',
type: 'map',
mapType: 'china',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '北京',value: Math.round(Math.random()*1000)},
{name: '天津',value: Math.round(Math.random()*1000)},
{name: '上海',value: Math.round(Math.random()*1000)},
{name: '重庆',value: Math.round(Math.random()*1000)},
{name: '河北',value: Math.round(Math.random()*1000)},
{name: '安徽',value: Math.round(Math.random()*1000)},
{name: '新疆',value: Math.round(Math.random()*1000)},
{name: '浙江',value: Math.round(Math.random()*1000)},
{name: '江西',value: Math.round(Math.random()*1000)},
{name: '山西',value: Math.round(Math.random()*1000)},
{name: '内蒙古',value: Math.round(Math.random()*1000)},
{name: '吉林',value: Math.round(Math.random()*1000)},
{name: '福建',value: Math.round(Math.random()*1000)},
{name: '广东',value: Math.round(Math.random()*1000)},
{name: '西藏',value: Math.round(Math.random()*1000)},
{name: '四川',value: Math.round(Math.random()*1000)},
{name: '宁夏',value: Math.round(Math.random()*1000)},
{name: '香港',value: Math.round(Math.random()*1000)},
{name: '澳门',value: Math.round(Math.random()*1000)}
]
},
{
name: 'iphone5',
type: 'map',
mapType: 'china',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '北京',value: Math.round(Math.random()*1000)},
{name: '天津',value: Math.round(Math.random()*1000)},
{name: '上海',value: Math.round(Math.random()*1000)},
{name: '广东',value: Math.round(Math.random()*1000)},
{name: '台湾',value: Math.round(Math.random()*1000)},
{name: '香港',value: Math.round(Math.random()*1000)},
{name: '澳门',value: Math.round(Math.random()*1000)}
]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
效果：
全国地图找子级地市：
（钻取列子http://echarts.baidu.com/echarts2/doc/example/map20.html）
<!DOCTYPE html>
<html>
<head>
<title>2.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body>
<!--定义页面图表容器-->
<!-- 必须制定容器的大小（height、width） -->
<div id="main" style="width: 98%; height: 500px; border: 1px solid #ccc; padding: 10px;"></div>
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../echarts-all.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main')); option = {
tooltip : {
trigger: 'item'
},
toolbox: {
show : true,
orient: 'vertical',
x:'right',
y:'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false}
}
},
series : [
{
tooltip: {
trigger: 'item',
formatter: '{b}'
},
name: '全国',
type: 'map',
mapType: 'china',
mapLocation: {//显示主地图的位置及其大小
x: 'left',
y: 'top',
width: '50%'
},
roam: false,//地图不允许拖动
selectedMode : 'single',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '北京', selected:false},
{name: '天津', selected:false},
{name: '上海', selected:false},
{name: '重庆', selected:false},
{name: '河北', selected:false},
{name: '河南', selected:false},
{name: '云南', selected:false},
{name: '辽宁', selected:false},
{name: '黑龙江', selected:false},
{name: '湖南', selected:false},
{name: '安徽', selected:false},
{name: '山东', selected:false},
{name: '新疆', selected:false},
{name: '江苏', selected:false},
{name: '浙江', selected:false},
{name: '江西', selected:false},
{name: '湖北', selected:false},
{name: '广西', selected:false},
{name: '甘肃', selected:false},
{name: '山西', selected:true},//默认选中
{name: '内蒙古',selected:true},//默认选中
{name: '陕西', selected:false},
{name: '吉林', selected:false},
{name: '福建', selected:false},
{name: '贵州', selected:false},
{name: '广东', selected:false},
{name: '青海', selected:false},
{name: '西藏', selected:false},
{name: '四川', selected:false},
{name: '宁夏', selected:false},
{name: '海南', selected:false},
{name: '台湾', selected:false},
{name: '香港', selected:false},
{name: '澳门', selected:false}
]
}
],
animation: false
};
myChart.setOption(option, true); //显示国家地图 //var ecConfig = require('echarts/config');
//myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){//由于是标签式单文件引入所以这个模块化单文件引入的事件要改变,不能使用require
myChart.on(echarts.config.EVENT.MAP_SELECTED, function (param){//单击省份事件
var selected = param.selected;
var selectedProvince;
var name;
for (var i = 0, l = option.series[0].data.length; i < l; i++) {
name = option.series[0].data[i].name;
option.series[0].data[i].selected = selected[name];
if (selected[name]) {
selectedProvince = name;
}
}
alert(selectedProvince);//所选择省的名字
if (typeof selectedProvince == 'undefined') {
option.series.splice(1);
option.legend = null;
option.dataRange = null;
myChart.setOption(option, true);//如果选择省份不存在则显示国家
return;
}
option.series[1] = {
name: '居民建档数',
type: 'map',
mapType: selectedProvince,
itemStyle:{
normal:{label:{show:true}},//没选择时候省份是否显示
emphasis:{label:{show:true}}//选择之后省份是否显示
},
mapLocation: {//显示子地图的位置及其大小
x: 'right',
y: 'top',
width: '50%'
},
roam: false,//地图不允许拖动
data:[
{name: '重庆市',value: Math.round(Math.random()*1000)},
{name: '北京市',value: Math.round(Math.random()*1000)},
{name: '海淀区',value: Math.round(Math.random()*1000)},//可以补填四个直辖市所管辖的区，否则直辖市所在的区没数据
{name: '天津市',value: Math.round(Math.random()*1000)},
{name: '上海市',value: Math.round(Math.random()*1000)},
{name: '香港',value: Math.round(Math.random()*1000)},
{name: '澳门',value: Math.round(Math.random()*1000)},
{name: '巴音郭楞蒙古自治州',value: Math.round(Math.random()*1000)},
{name: '和田地区',value: Math.round(Math.random()*1000)},
{name: '哈密地区',value: Math.round(Math.random()*1000)},
{name: '阿克苏地区',value: Math.round(Math.random()*1000)},
{name: '阿勒泰地区',value: Math.round(Math.random()*1000)},
{name: '喀什地区',value: Math.round(Math.random()*1000)},
{name: '塔城地区',value: Math.round(Math.random()*1000)},
{name: '昌吉回族自治州',value: Math.round(Math.random()*1000)},
{name: '克孜勒苏柯尔克孜自治州',value: Math.round(Math.random()*1000)},
{name: '吐鲁番地区',value: Math.round(Math.random()*1000)},
{name: '伊犁哈萨克自治州',value: Math.round(Math.random()*1000)},
{name: '博尔塔拉蒙古自治州',value: Math.round(Math.random()*1000)},
{name: '乌鲁木齐市',value: Math.round(Math.random()*1000)},
{name: '克拉玛依市',value: Math.round(Math.random()*1000)},
{name: '阿拉尔市',value: Math.round(Math.random()*1000)},
{name: '图木舒克市',value: Math.round(Math.random()*1000)},
{name: '五家渠市',value: Math.round(Math.random()*1000)},
{name: '石河子市',value: Math.round(Math.random()*1000)},
{name: '那曲地区',value: Math.round(Math.random()*1000)},
{name: '阿里地区',value: Math.round(Math.random()*1000)},
{name: '日喀则地区',value: Math.round(Math.random()*1000)},
{name: '林芝地区',value: Math.round(Math.random()*1000)},
{name: '昌都地区',value: Math.round(Math.random()*1000)},
{name: '山南地区',value: Math.round(Math.random()*1000)},
{name: '拉萨市',value: Math.round(Math.random()*1000)},
{name: '呼伦贝尔市',value: Math.round(Math.random()*1000)},
{name: '阿拉善盟',value: Math.round(Math.random()*1000)},
{name: '锡林郭勒盟',value: Math.round(Math.random()*1000)},
{name: '鄂尔多斯市',value: Math.round(Math.random()*1000)},
{name: '赤峰市',value: Math.round(Math.random()*1000)},
{name: '巴彦淖尔市',value: Math.round(Math.random()*1000)},
{name: '通辽市',value: Math.round(Math.random()*1000)},
{name: '乌兰察布市',value: Math.round(Math.random()*1000)},
{name: '兴安盟',value: Math.round(Math.random()*1000)},
{name: '包头市',value: Math.round(Math.random()*1000)},
{name: '呼和浩特市',value: Math.round(Math.random()*1000)},
{name: '乌海市',value: Math.round(Math.random()*1000)},
{name: '海西蒙古族藏族自治州',value: Math.round(Math.random()*1000)},
{name: '玉树藏族自治州',value: Math.round(Math.random()*1000)},
{name: '果洛藏族自治州',value: Math.round(Math.random()*1000)},
{name: '海南藏族自治州',value: Math.round(Math.random()*1000)},
{name: '海北藏族自治州',value: Math.round(Math.random()*1000)},
{name: '黄南藏族自治州',value: Math.round(Math.random()*1000)},
{name: '海东地区',value: Math.round(Math.random()*1000)},
{name: '西宁市',value: Math.round(Math.random()*1000)},
{name: '甘孜藏族自治州',value: Math.round(Math.random()*1000)},
{name: '阿坝藏族羌族自治州',value: Math.round(Math.random()*1000)},
{name: '凉山彝族自治州',value: Math.round(Math.random()*1000)},
{name: '绵阳市',value: Math.round(Math.random()*1000)},
{name: '达州市',value: Math.round(Math.random()*1000)},
{name: '广元市',value: Math.round(Math.random()*1000)},
{name: '雅安市',value: Math.round(Math.random()*1000)},
{name: '宜宾市',value: Math.round(Math.random()*1000)},
{name: '乐山市',value: Math.round(Math.random()*1000)},
{name: '南充市',value: Math.round(Math.random()*1000)},
{name: '巴中市',value: Math.round(Math.random()*1000)},
{name: '泸州市',value: Math.round(Math.random()*1000)},
{name: '成都市',value: Math.round(Math.random()*1000)},
{name: '资阳市',value: Math.round(Math.random()*1000)},
{name: '攀枝花市',value: Math.round(Math.random()*1000)},
{name: '眉山市',value: Math.round(Math.random()*1000)},
{name: '广安市',value: Math.round(Math.random()*1000)},
{name: '德阳市',value: Math.round(Math.random()*1000)},
{name: '内江市',value: Math.round(Math.random()*1000)},
{name: '遂宁市',value: Math.round(Math.random()*1000)},
{name: '自贡市',value: Math.round(Math.random()*1000)},
{name: '黑河市',value: Math.round(Math.random()*1000)},
{name: '大兴安岭地区',value: Math.round(Math.random()*1000)},
{name: '哈尔滨市',value: Math.round(Math.random()*1000)},
{name: '齐齐哈尔市',value: Math.round(Math.random()*1000)},
{name: '牡丹江市',value: Math.round(Math.random()*1000)},
{name: '绥化市',value: Math.round(Math.random()*1000)},
{name: '伊春市',value: Math.round(Math.random()*1000)},
{name: '佳木斯市',value: Math.round(Math.random()*1000)},
{name: '鸡西市',value: Math.round(Math.random()*1000)},
{name: '双鸭山市',value: Math.round(Math.random()*1000)},
{name: '大庆市',value: Math.round(Math.random()*1000)},
{name: '鹤岗市',value: Math.round(Math.random()*1000)},
{name: '七台河市',value: Math.round(Math.random()*1000)},
{name: '酒泉市',value: Math.round(Math.random()*1000)},
{name: '张掖市',value: Math.round(Math.random()*1000)},
{name: '甘南藏族自治州',value: Math.round(Math.random()*1000)},
{name: '武威市',value: Math.round(Math.random()*1000)},
{name: '陇南市',value: Math.round(Math.random()*1000)},
{name: '庆阳市',value: Math.round(Math.random()*1000)},
{name: '白银市',value: Math.round(Math.random()*1000)},
{name: '定西市',value: Math.round(Math.random()*1000)},
{name: '天水市',value: Math.round(Math.random()*1000)},
{name: '兰州市',value: Math.round(Math.random()*1000)},
{name: '平凉市',value: Math.round(Math.random()*1000)},
{name: '临夏回族自治州',value: Math.round(Math.random()*1000)},
{name: '金昌市',value: Math.round(Math.random()*1000)},
{name: '嘉峪关市',value: Math.round(Math.random()*1000)},
{name: '普洱市',value: Math.round(Math.random()*1000)},
{name: '红河哈尼族彝族自治州',value: Math.round(Math.random()*1000)},
{name: '文山壮族苗族自治州',value: Math.round(Math.random()*1000)},
{name: '曲靖市',value: Math.round(Math.random()*1000)},
{name: '楚雄彝族自治州',value: Math.round(Math.random()*1000)},
{name: '大理白族自治州',value: Math.round(Math.random()*1000)},
{name: '临沧市',value: Math.round(Math.random()*1000)},
{name: '迪庆藏族自治州',value: Math.round(Math.random()*1000)},
{name: '昭通市',value: Math.round(Math.random()*1000)},
{name: '昆明市',value: Math.round(Math.random()*1000)},
{name: '丽江市',value: Math.round(Math.random()*1000)},
{name: '西双版纳傣族自治州',value: Math.round(Math.random()*1000)},
{name: '保山市',value: Math.round(Math.random()*1000)},
{name: '玉溪市',value: Math.round(Math.random()*1000)},
{name: '怒江傈僳族自治州',value: Math.round(Math.random()*1000)},
{name: '德宏傣族景颇族自治州',value: Math.round(Math.random()*1000)},
{name: '百色市',value: Math.round(Math.random()*1000)},
{name: '河池市',value: Math.round(Math.random()*1000)},
{name: '桂林市',value: Math.round(Math.random()*1000)},
{name: '南宁市',value: Math.round(Math.random()*1000)},
{name: '柳州市',value: Math.round(Math.random()*1000)},
{name: '崇左市',value: Math.round(Math.random()*1000)},
{name: '来宾市',value: Math.round(Math.random()*1000)},
{name: '玉林市',value: Math.round(Math.random()*1000)},
{name: '梧州市',value: Math.round(Math.random()*1000)},
{name: '贺州市',value: Math.round(Math.random()*1000)},
{name: '钦州市',value: Math.round(Math.random()*1000)},
{name: '贵港市',value: Math.round(Math.random()*1000)},
{name: '防城港市',value: Math.round(Math.random()*1000)},
{name: '北海市',value: Math.round(Math.random()*1000)},
{name: '怀化市',value: Math.round(Math.random()*1000)},
{name: '永州市',value: Math.round(Math.random()*1000)},
{name: '邵阳市',value: Math.round(Math.random()*1000)},
{name: '郴州市',value: Math.round(Math.random()*1000)},
{name: '常德市',value: Math.round(Math.random()*1000)},
{name: '湘西土家族苗族自治州',value: Math.round(Math.random()*1000)},
{name: '衡阳市',value: Math.round(Math.random()*1000)},
{name: '岳阳市',value: Math.round(Math.random()*1000)},
{name: '益阳市',value: Math.round(Math.random()*1000)},
{name: '长沙市',value: Math.round(Math.random()*1000)},
{name: '株洲市',value: Math.round(Math.random()*1000)},
{name: '张家界市',value: Math.round(Math.random()*1000)},
{name: '娄底市',value: Math.round(Math.random()*1000)},
{name: '湘潭市',value: Math.round(Math.random()*1000)},
{name: '榆林市',value: Math.round(Math.random()*1000)},
{name: '延安市',value: Math.round(Math.random()*1000)},
{name: '汉中市',value: Math.round(Math.random()*1000)},
{name: '安康市',value: Math.round(Math.random()*1000)},
{name: '商洛市',value: Math.round(Math.random()*1000)},
{name: '宝鸡市',value: Math.round(Math.random()*1000)},
{name: '渭南市',value: Math.round(Math.random()*1000)},
{name: '咸阳市',value: Math.round(Math.random()*1000)},
{name: '西安市',value: Math.round(Math.random()*1000)},
{name: '铜川市',value: Math.round(Math.random()*1000)},
{name: '清远市',value: Math.round(Math.random()*1000)},
{name: '韶关市',value: Math.round(Math.random()*1000)},
{name: '湛江市',value: Math.round(Math.random()*1000)},
{name: '梅州市',value: Math.round(Math.random()*1000)},
{name: '河源市',value: Math.round(Math.random()*1000)},
{name: '肇庆市',value: Math.round(Math.random()*1000)},
{name: '惠州市',value: Math.round(Math.random()*1000)},
{name: '茂名市',value: Math.round(Math.random()*1000)},
{name: '江门市',value: Math.round(Math.random()*1000)},
{name: '阳江市',value: Math.round(Math.random()*1000)},
{name: '云浮市',value: Math.round(Math.random()*1000)},
{name: '广州市',value: Math.round(Math.random()*1000)},
{name: '汕尾市',value: Math.round(Math.random()*1000)},
{name: '揭阳市',value: Math.round(Math.random()*1000)},
{name: '珠海市',value: Math.round(Math.random()*1000)},
{name: '佛山市',value: Math.round(Math.random()*1000)},
{name: '潮州市',value: Math.round(Math.random()*1000)},
{name: '汕头市',value: Math.round(Math.random()*1000)},
{name: '深圳市',value: Math.round(Math.random()*1000)},
{name: '东莞市',value: Math.round(Math.random()*1000)},
{name: '中山市',value: Math.round(Math.random()*1000)},
{name: '延边朝鲜族自治州',value: Math.round(Math.random()*1000)},
{name: '吉林市',value: Math.round(Math.random()*1000)},
{name: '白城市',value: Math.round(Math.random()*1000)},
{name: '松原市',value: Math.round(Math.random()*1000)},
{name: '长春市',value: Math.round(Math.random()*1000)},
{name: '白山市',value: Math.round(Math.random()*1000)},
{name: '通化市',value: Math.round(Math.random()*1000)},
{name: '四平市',value: Math.round(Math.random()*1000)},
{name: '辽源市',value: Math.round(Math.random()*1000)},
{name: '承德市',value: Math.round(Math.random()*1000)},
{name: '张家口市',value: Math.round(Math.random()*1000)},
{name: '保定市',value: Math.round(Math.random()*1000)},
{name: '唐山市',value: Math.round(Math.random()*1000)},
{name: '沧州市',value: Math.round(Math.random()*1000)},
{name: '石家庄市',value: Math.round(Math.random()*1000)},
{name: '邢台市',value: Math.round(Math.random()*1000)},
{name: '邯郸市',value: Math.round(Math.random()*1000)},
{name: '秦皇岛市',value: Math.round(Math.random()*1000)},
{name: '衡水市',value: Math.round(Math.random()*1000)},
{name: '廊坊市',value: Math.round(Math.random()*1000)},
{name: '恩施土家族苗族自治州',value: Math.round(Math.random()*1000)},
{name: '十堰市',value: Math.round(Math.random()*1000)},
{name: '宜昌市',value: Math.round(Math.random()*1000)},
{name: '襄樊市',value: Math.round(Math.random()*1000)},
{name: '黄冈市',value: Math.round(Math.random()*1000)},
{name: '荆州市',value: Math.round(Math.random()*1000)},
{name: '荆门市',value: Math.round(Math.random()*1000)},
{name: '咸宁市',value: Math.round(Math.random()*1000)},
{name: '随州市',value: Math.round(Math.random()*1000)},
{name: '孝感市',value: Math.round(Math.random()*1000)},
{name: '武汉市',value: Math.round(Math.random()*1000)},
{name: '黄石市',value: Math.round(Math.random()*1000)},
{name: '神农架林区',value: Math.round(Math.random()*1000)},
{name: '天门市',value: Math.round(Math.random()*1000)},
{name: '仙桃市',value: Math.round(Math.random()*1000)},
{name: '潜江市',value: Math.round(Math.random()*1000)},
{name: '鄂州市',value: Math.round(Math.random()*1000)},
{name: '遵义市',value: Math.round(Math.random()*1000)},
{name: '黔东南苗族侗族自治州',value: Math.round(Math.random()*1000)},
{name: '毕节地区',value: Math.round(Math.random()*1000)},
{name: '黔南布依族苗族自治州',value: Math.round(Math.random()*1000)},
{name: '铜仁地区',value: Math.round(Math.random()*1000)},
{name: '黔西南布依族苗族自治州',value: Math.round(Math.random()*1000)},
{name: '六盘水市',value: Math.round(Math.random()*1000)},
{name: '安顺市',value: Math.round(Math.random()*1000)},
{name: '贵阳市',value: Math.round(Math.random()*1000)},
{name: '烟台市',value: Math.round(Math.random()*1000)},
{name: '临沂市',value: Math.round(Math.random()*1000)},
{name: '潍坊市',value: Math.round(Math.random()*1000)},
{name: '青岛市',value: Math.round(Math.random()*1000)},
{name: '菏泽市',value: Math.round(Math.random()*1000)},
{name: '济宁市',value: Math.round(Math.random()*1000)},
{name: '德州市',value: Math.round(Math.random()*1000)},
{name: '滨州市',value: Math.round(Math.random()*1000)},
{name: '聊城市',value: Math.round(Math.random()*1000)},
{name: '东营市',value: Math.round(Math.random()*1000)},
{name: '济南市',value: Math.round(Math.random()*1000)},
{name: '泰安市',value: Math.round(Math.random()*1000)},
{name: '威海市',value: Math.round(Math.random()*1000)},
{name: '日照市',value: Math.round(Math.random()*1000)},
{name: '淄博市',value: Math.round(Math.random()*1000)},
{name: '枣庄市',value: Math.round(Math.random()*1000)},
{name: '莱芜市',value: Math.round(Math.random()*1000)},
{name: '赣州市',value: Math.round(Math.random()*1000)},
{name: '吉安市',value: Math.round(Math.random()*1000)},
{name: '上饶市',value: Math.round(Math.random()*1000)},
{name: '九江市',value: Math.round(Math.random()*1000)},
{name: '抚州市',value: Math.round(Math.random()*1000)},
{name: '宜春市',value: Math.round(Math.random()*1000)},
{name: '南昌市',value: Math.round(Math.random()*1000)},
{name: '景德镇市',value: Math.round(Math.random()*1000)},
{name: '萍乡市',value: Math.round(Math.random()*1000)},
{name: '鹰潭市',value: Math.round(Math.random()*1000)},
{name: '新余市',value: Math.round(Math.random()*1000)},
{name: '南阳市',value: Math.round(Math.random()*1000)},
{name: '信阳市',value: Math.round(Math.random()*1000)},
{name: '洛阳市',value: Math.round(Math.random()*1000)},
{name: '驻马店市',value: Math.round(Math.random()*1000)},
{name: '周口市',value: Math.round(Math.random()*1000)},
{name: '商丘市',value: Math.round(Math.random()*1000)},
{name: '三门峡市',value: Math.round(Math.random()*1000)},
{name: '新乡市',value: Math.round(Math.random()*1000)},
{name: '平顶山市',value: Math.round(Math.random()*1000)},
{name: '郑州市',value: Math.round(Math.random()*1000)},
{name: '安阳市',value: Math.round(Math.random()*1000)},
{name: '开封市',value: Math.round(Math.random()*1000)},
{name: '焦作市',value: Math.round(Math.random()*1000)},
{name: '许昌市',value: Math.round(Math.random()*1000)},
{name: '濮阳市',value: Math.round(Math.random()*1000)},
{name: '漯河市',value: Math.round(Math.random()*1000)},
{name: '鹤壁市',value: Math.round(Math.random()*1000)},
{name: '大连市',value: Math.round(Math.random()*1000)},
{name: '朝阳市',value: Math.round(Math.random()*1000)},
{name: '丹东市',value: Math.round(Math.random()*1000)},
{name: '铁岭市',value: Math.round(Math.random()*1000)},
{name: '沈阳市',value: Math.round(Math.random()*1000)},
{name: '抚顺市',value: Math.round(Math.random()*1000)},
{name: '葫芦岛市',value: Math.round(Math.random()*1000)},
{name: '阜新市',value: Math.round(Math.random()*1000)},
{name: '锦州市',value: Math.round(Math.random()*1000)},
{name: '鞍山市',value: Math.round(Math.random()*1000)},
{name: '本溪市',value: Math.round(Math.random()*1000)},
{name: '营口市',value: Math.round(Math.random()*1000)},
{name: '辽阳市',value: Math.round(Math.random()*1000)},
{name: '盘锦市',value: Math.round(Math.random()*1000)},
{name: '忻州市',value: Math.round(Math.random()*1000)},
{name: '吕梁市',value: Math.round(Math.random()*1000)},
{name: '临汾市',value: Math.round(Math.random()*1000)},
{name: '晋中市',value: Math.round(Math.random()*1000)},
{name: '运城市',value: Math.round(Math.random()*1000)},
{name: '大同市',value: Math.round(Math.random()*1000)},
{name: '长治市',value: Math.round(Math.random()*1000)},
{name: '朔州市',value: Math.round(Math.random()*1000)},
{name: '晋城市',value: Math.round(Math.random()*1000)},
{name: '太原市',value: Math.round(Math.random()*1000)},
{name: '阳泉市',value: Math.round(Math.random()*1000)},
{name: '六安市',value: Math.round(Math.random()*1000)},
{name: '安庆市',value: Math.round(Math.random()*1000)},
{name: '滁州市',value: Math.round(Math.random()*1000)},
{name: '宣城市',value: Math.round(Math.random()*1000)},
{name: '阜阳市',value: Math.round(Math.random()*1000)},
{name: '宿州市',value: Math.round(Math.random()*1000)},
{name: '黄山市',value: Math.round(Math.random()*1000)},
{name: '巢湖市',value: Math.round(Math.random()*1000)},
{name: '亳州市',value: Math.round(Math.random()*1000)},
{name: '池州市',value: Math.round(Math.random()*1000)},
{name: '合肥市',value: Math.round(Math.random()*1000)},
{name: '蚌埠市',value: Math.round(Math.random()*1000)},
{name: '芜湖市',value: Math.round(Math.random()*1000)},
{name: '淮北市',value: Math.round(Math.random()*1000)},
{name: '淮南市',value: Math.round(Math.random()*1000)},
{name: '马鞍山市',value: Math.round(Math.random()*1000)},
{name: '铜陵市',value: Math.round(Math.random()*1000)},
{name: '南平市',value: Math.round(Math.random()*1000)},
{name: '三明市',value: Math.round(Math.random()*1000)},
{name: '龙岩市',value: Math.round(Math.random()*1000)},
{name: '宁德市',value: Math.round(Math.random()*1000)},
{name: '福州市',value: Math.round(Math.random()*1000)},
{name: '漳州市',value: Math.round(Math.random()*1000)},
{name: '泉州市',value: Math.round(Math.random()*1000)},
{name: '莆田市',value: Math.round(Math.random()*1000)},
{name: '厦门市',value: Math.round(Math.random()*1000)},
{name: '丽水市',value: Math.round(Math.random()*1000)},
{name: '杭州市',value: Math.round(Math.random()*1000)},
{name: '温州市',value: Math.round(Math.random()*1000)},
{name: '宁波市',value: Math.round(Math.random()*1000)},
{name: '舟山市',value: Math.round(Math.random()*1000)},
{name: '台州市',value: Math.round(Math.random()*1000)},
{name: '金华市',value: Math.round(Math.random()*1000)},
{name: '衢州市',value: Math.round(Math.random()*1000)},
{name: '绍兴市',value: Math.round(Math.random()*1000)},
{name: '嘉兴市',value: Math.round(Math.random()*1000)},
{name: '湖州市',value: Math.round(Math.random()*1000)},
{name: '盐城市',value: Math.round(Math.random()*1000)},
{name: '徐州市',value: Math.round(Math.random()*1000)},
{name: '南通市',value: Math.round(Math.random()*1000)},
{name: '淮安市',value: Math.round(Math.random()*1000)},
{name: '苏州市',value: Math.round(Math.random()*1000)},
{name: '宿迁市',value: Math.round(Math.random()*1000)},
{name: '连云港市',value: Math.round(Math.random()*1000)},
{name: '扬州市',value: Math.round(Math.random()*1000)},
{name: '南京市',value: Math.round(Math.random()*1000)},
{name: '泰州市',value: Math.round(Math.random()*1000)},
{name: '无锡市',value: Math.round(Math.random()*1000)},
{name: '常州市',value: Math.round(Math.random()*1000)},
{name: '镇江市',value: Math.round(Math.random()*1000)},
{name: '吴忠市',value: Math.round(Math.random()*1000)},
{name: '中卫市',value: Math.round(Math.random()*1000)},
{name: '固原市',value: Math.round(Math.random()*1000)},
{name: '银川市',value: Math.round(Math.random()*1000)},
{name: '石嘴山市',value: Math.round(Math.random()*1000)},
{name: '儋州市',value: Math.round(Math.random()*1000)},
{name: '文昌市',value: Math.round(Math.random()*1000)},
{name: '乐东黎族自治县',value: Math.round(Math.random()*1000)},
{name: '三亚市',value: Math.round(Math.random()*1000)},
{name: '琼中黎族苗族自治县',value: Math.round(Math.random()*1000)},
{name: '东方市',value: Math.round(Math.random()*1000)},
{name: '海口市',value: Math.round(Math.random()*1000)},
{name: '万宁市',value: Math.round(Math.random()*1000)},
{name: '澄迈县',value: Math.round(Math.random()*1000)},
{name: '白沙黎族自治县',value: Math.round(Math.random()*1000)},
{name: '琼海市',value: Math.round(Math.random()*1000)},
{name: '昌江黎族自治县',value: Math.round(Math.random()*1000)},
{name: '临高县',value: Math.round(Math.random()*1000)},
{name: '陵水黎族自治县',value: Math.round(Math.random()*1000)},
{name: '屯昌县',value: Math.round(Math.random()*1000)},
{name: '定安县',value: Math.round(Math.random()*1000)},
{name: '保亭黎族苗族自治县',value: Math.round(Math.random()*1000)},
{name: '五指山市',value: Math.round(Math.random()*1000)}
]
};
option.legend = {
x:'right',
data:['居民建档数']
};
option.dataRange = {
orient: 'horizontal',
x: 'right',
min: 0,
max: 1000,
color:['orange','yellow'],
text:['高','低'], // 文本，默认为数值文本
splitNumber:0
};
myChart.setOption(option, true);//显示省地图
}); //选择地级市的单击事件
myChart.on(echarts.config.EVENT.CLICK, function (param){
var seriesName=param.seriesName;
if(seriesName.trim()=="居民建档数"||seriesName.trim()==""){//由于全国地图和省地图都要触发这个事 件，所以要判断是省还是地级市
alert(param.name);//地级市的名字
}
});
</script>
</body>
</html>
效果：
4、highchart之chart.zoomType--实现指定区域放大
指定此图是沿着什么轴进行放大，例如zoomType: 'xy'沿着X轴和Y轴放大，依次类推
5、highchart之x轴分类过多，以缩略跨值显示时，plotOptions中dataLabels无法显示多值问题
正常图: 
异常图:
处理代码：
plotOptions: {
line: {
dataLabels: {
enabled: true,
formatter: function() {
// 根据条件设置要显示的值
if(表达式){
return xxx;
}
},
rotation: 1 // 设置下倾斜度，多值问题解决
},
enableMouseTracking: true
}
}
6、echarts之全国省市县地图扩展
项目所迫，要求做市及区的地图，echarts官方例子...咳...咳咳...，╮(╯▽╰)╭看了良久，一脸蒙逼......
折腾良久，终于出来了能看的扩展图，不多说了，详情看代码注解。（去掉标色的区域，其实和普通图表没啥区别）
<%@ page contentType="text/html; charset=utf-8" isELIgnored="false"%>
<html>
<head>
<title>市级地图</title>
</head>
<body>
<div id="main" style="height: 400px;"></div>
</body>
<!-- 由于这是jsp所以取得项目的路径引入两个关键js即可 -->
<script src="<%=path %>/js/jquery/jquery-1.8.3.min.js"></script>
<script src="<%=path %>/ts/build/dist/echarts.js"> </script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: '<%=path %>/js/echarts/build/dist'
}
}); // 使用
require(
[
'echarts',
'echarts/chart/map' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
// 这里名字对应的编码可以自己定义啦，只要对应正确的geoJson文件就行
var cityMap = {
"汕尾市": "120100",
"广州市": "440100"
};
/* ***** 加载扩展的地图到echarts的
mapGeoData对象中，如此series.mapType才能取得扩展的地图
*/
var curIndx = 0;
var mapType = [];
// echart 默认会加载世界地图和中国地图，这里是获取已经加载的地图数据对象
var mapGeoData = require('echarts/util/mapData/params');
console.log(mapGeoData)
for (var city in cityMap) {
mapType.push(city);
// 自定义扩展图表类型，这里的geoJson是盗用echarts官方的数据
mapGeoData.params[city] = {
getGeoJson: (function (c) {
var geoJsonName = cityMap[c];
return function (callback) {
// 为什么要写这个路径，╭(╯3╰)╮没办法啊，geoJson放在这下面啊，当然放别的路径也可以
$.getJSON('<%=path %>/js/echarts/geoJson/china-main-city/' + geoJsonName + '.json', callback);
}
})(city)
}
}
// ****** end ****** // 这两个玩意不要好像也没事，等有时间在深究
var ecConfig = require('echarts/config');
var zrEvent = require('zrender/tool/event'); option = {
title: {
text : '',
},
tooltip : {
trigger: 'item',
formatter: '{b}'
},
dataRange: {
min: 0,
max: 2500,
x: 'left',
y: 'bottom',
text:['高','低'], // 文本，默认为数值文本
calculable : true,
color:['#ff0000','#FFFF00']
},
series : [
{
name: '',
type: 'map',
mapType: '广州市',
selectedMode : 'single',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '花都区', value: Math.round(Math.random()*1000)},
{name: '从化市', value: Math.round(Math.random()*1000)},
{name: '增城市', value: Math.round(Math.random()*100)},
{name: '白云区', value: Math.round(Math.random()*1000)},
{name: '萝岗区', value: Math.round(Math.random()*1000)},
{name: '天河区', value: Math.round(Math.random()*1000)},
{name: '越秀区', value: Math.round(Math.random()*100)},
{name: '荔湾区', value: Math.round(Math.random()*1000)},
{name: '海珠区', value: Math.round(Math.random()*1000)},
{name: '黄埔区', value: Math.round(Math.random()*100)},
{name: '番禺区', value: Math.round(Math.random()*1000)},
{name: '南沙区', value: Math.round(Math.random()*1000)}
]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
try{
window.addEventListener('resize', function () {
myChart.resize();// 图表自适应窗口
});
}catch(e){}
}
);
</script>
</html>
单文件引入版：
var mapGeoData = echarts.util.mapData.params; 理解透这句话，单文件引入方式基本也就理解透彻了
<%@ page contentType="text/html; charset=utf-8" isELIgnored="false"%>
<%
String path = request.getContextPath();
%><html>
<head>
<title>市级地图</title>
</head>
<body>
<div class="container" >
<div class="row">
<div id="main" style="height: 400px;"></div>
</div>
</div>
</body>
<!-- Placed at the end of the document so the pages load faster -->
<script src="<%=path %>/js/jquery/jquery-1.8.3.min.js"></script>
<script src="<%=path %>/js/echarts/build/dist/echarts-all.js"> </script>
<script type="text/javascript">
// 单文件引入方式初始化
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('main')); var cityMap = {
"汕尾市": "120100",
"广州市": "440100"
}; console.log(echarts);
var curIndx = 0;
var mapType = [];
// 通过console.log(echarts)，查看到地图数据对象
var mapGeoData = echarts.util.mapData.params;
console.log(mapGeoData);
for (var city in cityMap) {
mapType.push(city);
// 自定义扩展图表类型
mapGeoData.params[city] = {
getGeoJson: (function (c) {
var geoJsonName = cityMap[c];
return function (callback) {
$.getJSON('<%=path %>/js/echarts/geoJson/china-main-city/' + geoJsonName + '.json', callback);
}
})(city)
}
}
option = {
title: {
text : '',
},
tooltip : {
trigger: 'item',
formatter: '{b}'
},
dataRange: {
min: 0,
max: 2500,
x: 'left',
y: 'bottom',
text:['高','低'], // 文本，默认为数值文本
calculable : true,
color:['#ff0000','#FFFF00']
},
series : [
{
name: '',
type: 'map',
mapType: '广州市',
selectedMode : 'single',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '花都区', value: Math.round(Math.random()*1000)},
{name: '从化市', value: Math.round(Math.random()*1000)},
{name: '增城市', value: Math.round(Math.random()*100)},
{name: '白云区', value: Math.round(Math.random()*1000)},
{name: '萝岗区', value: Math.round(Math.random()*1000)},
{name: '天河区', value: Math.round(Math.random()*1000)},
{name: '越秀区', value: Math.round(Math.random()*100)},
{name: '荔湾区', value: Math.round(Math.random()*1000)},
{name: '海珠区', value: Math.round(Math.random()*1000)},
{name: '黄埔区', value: Math.round(Math.random()*100)},
{name: '番禺区', value: Math.round(Math.random()*1000)},
{name: '南沙区', value: Math.round(Math.random()*1000)}
]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
try{
window.addEventListener('resize', function () {
myChart.resize();
});
}catch(e){}
</script>
</html>
7、echarts之线型图没有连接线问题
好好的线图，突然没了线，是不是感觉整个人生都灰暗了，那么接下来便是改变我们人生色彩的时候啦。
data: [
{
"name": "需求导入",
"value": null
},
......
原因就是value:null导致，改成value:""就解决了
8、echarts之map边界线和区域颜色
series : [
{
name: '',
type: 'map',
mapType: '广州市',
selectedMode : 'single',
itemStyle:{
normal:{
borderColor: '#ffffff',// 边界线颜色设置
label:{show:true},
areaStyle:{color:'#00FF33'}// 区域颜色设置
},
emphasis:{label:{show:true}}
},
data:[
]
}
]
9、echarts x轴文字垂直显示
在axisLabel下添加属性：
formatter:function(val){
return val.split("").join("\n");
}
10、echarts x轴文字 点击事件
axiLabel设置可被点击：
xAxis : [ {
type : 'category',
splitLine : {
show : false
},
data : staffName,
axisLabel : {clickable: true }
} ],
11、echarts 绘图美化
优化部分
option = {
yAxis : [
{
type : 'value',
name : '单位（%）',
splitLine:{
show:false,
lineStyle:{type: 'dashed',width:0}
},
splitArea:{
show: true,
areaStyle:{color:['rgba(255, 255, 255, 0.5)','rgba(238, 232, 170, 0.5)']}
},
axisLabel:{
formatter: '{value}',
textStyle:{baseline: 'middle'} // y轴 name有值时，防止最大和最小值刻度间距异常
}
}
],
xAxis:[{
splitLine :{
show:true,
lineStyle:{
type: 'dashed',
width:1
}
},
... ...
}]
... ...
};
效果图：
12、highcharts 之fontWeight ie8兼容问题
如下在ie8的时候会报错（无法获取fontWeight属性）：
title: {
text: '各延期时长项目数量分布',
subtext:' ',
style:{fontFamily : '微软雅黑',fontSize: 13,fontWeight: 'normal'}
}
兼容写法（fontWeight属性改写成数字）：
title: {
text: '各延期时长项目数量分布',
subtext:' ',
style:{fontFamily : '微软雅黑',fontSize: 13,fontWeight: 400}
}
图表插件使用汇总（echarts，highchairts）的更多相关文章
- 数据图表插件echarts（二）
前言 上一篇文章简单介绍了一下百度公司前端部门写的一个js插件echarts,这是一款很强大的图表插件,里面的地图控件也是很强大的,支持离线的使用,并且数据也是离线的,使用很方便.下面我就简单介绍一下 ...
- Echarts图表插件(4.x版本)使用（二、带分类筛选的多个图表/实例化多个ECharts，以关系图/force为例）
导读 如果想在一个页面里实例化带分类筛选的多个Echarts该怎么做呢? 曾探讨了带分类选择的关系图显示为自定义图片的需求实现,传送门ECharts图表插件(4.x版本)使用(一.关系图force节点 ...
- ECharts图表插件(4.x版本)使用（一、关系图force节点显示为自定义图像/图片，带分类选择）
导读 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safar ...
- vue3.x版本安装element-ui、axios及echarts图表插件
项目中安装使用element-UI 命令行: vue add element 安装成功后,项目会自动将element-UI引入项目中,刷新项目即可 项目中安装使用axios数据请求 vue add a ...
- Ionic 2 rc 添加第三方的插件(plugin) 以Echarts为例
Ionic2 在升级RC版之后做了很多改变,本文就使用Echarts 图表插件为例.记录一下如何引用第三方插件备忘. 一.再集成终端中使用NPM安装Echarts npm install echart ...
- python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)
一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...
- 1.前端数据可视化插件:Highcharts、Echarts和D3（区别）
前端数据可视化插件有很多,但我用过的只有Highcharts(https://www.hcharts.cn/).Echarts(http://echarts.baidu.com/)和D3(https: ...
- flot - jQuery 图表插件(jquery.flot)使用
Flot是纯Javascript实现的基于jQuery的图表插件,主要支持线状图和柱状图的绘制(通过插件也可以支持饼状图). 特别注意Flot使用的是UTC时间,最好修改flot.js去掉所有的UTC ...
- 不错的jQuery图表插件 .
很多时候我们需要在网页中显示数据统计报表,从而能很直观地了解数据的走向,更好地帮助决策分析.今天就给大家分享几个个人觉得好用的jQuery图表插件,这几个图表插件使用起来非常方便,而且挺灵活的,相信大 ...
随机推荐
- 初识Promise
Promise对象 曾经用seajs开发后台管理的时候,矫情的PHPER非要JS内联到HTML文件中,方便他调用内容,还指定了jQueryFileUpload作为上传插件. 当时看到jQueryFil ...
- Centos7上安装dnf-plugins-core
为了在Centos上使用dnf copr命令,需要安装dnf-plugins-core,找了很长时间,包括试了源码编译安装都不行,最后找到了方法,执行下面的命令就可以了. 需要root权限 wget ...
- windows svn 配置以及iis同步传送
服务端:http://www.visualsvn.com/server/download/ 客户端: http://tortoisesvn.net/downloads.html 建立版本之后,在版本 ...
- UE3 ExampleGame Android版无法运行解决方案
首先将 UE3\UnrealEngine3\UDKGame\Build\Android 文件夹 拷贝到 ExampleGame\Build下面.里面有相应的android 配置文件.xml 若果此时 ...
- 给员工授予svn相关权限
步骤: 了解:地址2.4是代码svn.地址2.16是文档svn 以授予 SVN地址是:http://172.16.2.16/svn/SystemNetworkBU 权限组为mam_group,是只读 ...
- 如何在HTML中加载Flash(2种实现方法)_HTML/Xhtml_网页制作
点评:如何在HTML中加载Flash,为网页添加更多的色彩,普通的网页以无法满足用户的需求,接下来为大家介绍下2种在HTML中加载Flash的方法,感兴趣的各位可以适当参考下,希望对你有所帮助 第一种 ...
- 预测帖 苹果在2年之内会换Arm
这几天看了iPad Pro和新的macbook, 我个人预测,苹果2年之内必换Arm处理器 首先会是笔记本. 而且会把软件移植也做的很好,不需要怎么改代码,只需要编译的时候加入相应的cpu就可以.至于 ...
- WPF触发器的使用
WPF中定义了五个触发器类:Trigger.MultiTrigger.DataTrigger.multiDataTrigger.EventTrigger.下面我来介绍一下怎么使用这几个触发器的使用方法 ...
- C# DateTime转Json汇总
DateTime转换成json的时候容易出现不想要的格式,在网上搜索了相关的解决方法copy如下: 参考http://www.newtonsoft.com/json/help/html/DatesIn ...
- DataGridView控件内建立日期选择编辑列
两个文件: CalendarColumn 类: public class CalendarColumn : DataGridViewColumn { public CalendarColumn() : ...