echarts实践
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../lib/reset.css">
<script src="../lib/jquery/jquery.min.js"></script>
<script src="../lib/echarts/echarts.js"></script>
<script>
$(function () {
var myChart = echarts.init(document.getElementById('main'));
var option = {
backgroundColor: 'rgb(54,170,154)',
color: ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
'#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
'#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
'#6699FF', '#ff6666', '#3cb371', '#b8860b', '#30e0e0'],
//标题
title: {
//图表标题
text: '全国各省市降水量柱状图',
//图表副标题
subtext: '',
//标题水平安放位置，默认为左对齐，可选为center、left、right、{number}（x坐标，单位px）
x: 'left',
//垂直安放位置，默认为全图顶端，可选为top、bottom、center、{number}（y坐标，单位px）
y: 'top',
// 水平对齐方式，默认根据x设置自动调整
// textAlign: null,
//标题的背景颜色，默认为透明无色(当borderWidth不为零的时候才会生效)
backgroundColor: 'rgba(0,0,0,0)',
// 标题边框颜色
borderColor: '#cc352d',
// 标题边框线宽，单位px，默认为0（无边框）
borderWidth: 0,
// 标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css
padding: 5,
// 主副标题纵向间隔，单位px，默认为10，
itemGap: 10,
// 主标题文字颜色
textStyle: {
fontSize: 16,
fontWeight: 'bolder',
color: '#1ea2f7'
},
// 副标题文字颜色
subtextStyle: {
color: ''
}
},
//图例
legend: {
// 布局方式，默认为水平布局，可选为horizontal、vertical
orient: 'horizontal',
// 水平安放位置，默认为全图居中，可选为center、left、right、{number}（x坐标，单位px）
x: 'center',
// 垂直安放位置，默认为全图顶端，可选为top、bottom、center、{number}（y坐标，单位px）
y: 'top',
//图例背景颜色
backgroundColor: 'rgba(0,0,0,0)',
// 图例边框颜色
borderColor: '#ccc',
// 图例边框线宽，单位px，默认为0（无边框）
borderWidth: 0,
// 图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css
padding: 5,
// 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
itemGap: 10,
// 图例图形宽度
itemWidth: 20,
// 图例图形高度
itemHeight: 14,
// 图例文字颜色
textStyle: {
color: '#333'
}
},
//值域
dataRange: {
// 布局方式，默认为垂直布局，可选为horizontal、vertical
orient: 'horizontal',
//最小值
min: 0,
//最大值
max: 250,
// 水平安放位置，默认为全图左对齐，可选为center、left、right、{number}（x坐标，单位px）
x: 'center',
// 垂直安放位置，默认为全图底部，可选为top、bottom、center
y: '40',
backgroundColor: 'rgba(0,0,0,0)',
// 值域边框颜色
borderColor: '#ccc',
// 值域边框线宽，单位px，默认为0（无边框）
borderWidth: 0,
// 值域内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css
padding: 5,
// 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
itemGap: 20,
// 值域图形宽度，线性渐变水平布局宽度为该值 * 10
itemWidth: 20,
// 值域图形高度，线性渐变垂直布局高度为该值 * 10
itemHeight: 14,
// 分割段数，默认为5，为0时为线性渐变
splitNumber: 5,
//颜色
color: ['#1e90ff', '#f0ffff'],
// 文本，默认为数值文本
//text:['高','低'],
// 值域文字颜色
textStyle: {
color: '#333'
}
},
//工具箱
toolbox: { //可视化的工具箱
show: true,
feature: {
dataView: { //数据视图
show: true
},
restore: { //重置
show: true
},
dataZoom: { //数据缩放视图
show: true
},
saveAsImage: {//保存图片
show: true
},
magicType: {//动态类型切换
type: ['bar', 'line']
},
},
// 布局方式，默认为水平布局，可选为horizontal、vertical
orient: 'horizontal',
// 水平安放位置，默认为全图右对齐，可选为center、left、right、{number}（x坐标，单位px）
x: 'right',
// 垂直安放位置，默认为全图顶端，可选为top、bottom、center、{number}（y坐标，单位px）
y: 'top',
//不知道啥作用
color: ['#1e90ff', '#22bb22', '#4b0082', '#d2691e'],
// 工具箱背景颜色(borderWidth不为0有效)
backgroundColor: 'rgba(0,0,0,0)',
// 工具箱边框颜色(borderWidth不为0有效)
borderColor: '#cc7b4b',
// 工具箱边框线宽，单位px，默认为0（无边框）
borderWidth: 0,
// 工具箱内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css
padding: 5,
// 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
itemGap: 10,
// 工具箱图形宽度大小
itemSize: 16,
// 自定义图片icon
featureImageIcon: {},
},
//提示框
tooltip: {
// 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
trigger: 'item',
// 显示延迟，添加显示延迟可以避免频繁切换，单位ms
showDelay: 20,
// 隐藏延迟，单位ms
hideDelay: 100,
// 动画变换时间，单位s
transitionDuration: 0.4,
// 提示背景颜色，默认为透明度为0.7的黑色
backgroundColor: 'rgba(255,73,22,0.7)',
// 提示边框颜色
borderColor: '#333',
// 提示边框圆角，单位px，默认为4
borderRadius: 4,
// 提示边框线宽，单位px，默认为0（无边框）
borderWidth: 0,
// 提示内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css
padding: 5,
// 坐标轴指示器，坐标轴触发有效
axisPointer: {
// 默认为直线，可选为：'line' | 'shadow'
type: 'line',
// 直线指示器样式设置
lineStyle: {
color: '#48b',
width: 2,
type: 'solid'
},
// 阴影指示器样式设置
shadowStyle: {
// 阴影大小
width: 'auto',
// 阴影颜色
color: 'rgba(150,150,150,0.3)'
}
},
textStyle: {
color: '#2515ff'
}
},
//区域缩放控制器
dataZoom: [
{
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
// 布局方式，默认为水平布局，可选为：horizontal、vertical
orient: 'horizontal',
// 水平安放位置，默认为根据grid参数适配，可选为{number}（x坐标，单位px）
// x: {number},
x: 'center',
// 垂直安放位置，默认为根据grid参数适配，可选为{number}（y坐标，单位px）
// y: {number},
y: 310,
// 指定宽度，横向布局时默认为根据grid参数适配
// width: {number},
// 指定高度，纵向布局时默认为根据grid参数适配
height: 30,
// 背景颜色
backgroundColor: 'rgba(0,0,0,0)',
// 数据背景颜色
dataBackgroundColor: '#eee',
// 填充颜色
fillerColor: 'rgba(144,197,237,0.2)',
//缩放起点
start: 0,
// 缩放终点
end: 100,
// 手柄颜色
handleColor: 'rgba(70,130,180,0.8)',
//缩放手柄图标
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
//缩放手柄的尺寸
handleSize: '80%',
//缩放手柄的样式
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
},
{ // 这个dataZoom组件，也控制x轴。
type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
start: 10, // 左边在 10% 的位置。
end: 60 // 右边在 60% 的位置。
}
],
//坐标系位置
grid: {
//左边距
x: 80,
// 上边距
y: 80,
// 右边距
x2: 80,
//下边距
y2: 60,
// width: {totalWidth} - x - x2,
// height: {totalHeight} - y - y2,
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 1,
borderColor: '#ccc'
},
//x轴
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
//y轴
yAxis: {
type: 'value',
// boundaryGap: [0, '100%']
},
//数据
series: [{
data: [120, 220, 150, 80, 70, 110, 130],
type: 'bar',
//曲线是否平滑
smooth: true,
showBackground: true,
backgroundStyle: {
color: 'rgba(220,21,12,0.8)'
},
itemStyle: {
normal: {
// color: '各异',
barBorderColor: '#fff', // 柱条边线
barBorderRadius: 0, // 柱条边线圆角，单位px，默认为0
barBorderWidth: 1, // 柱条边线线宽，单位px，默认为1
label: {
show: false
// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
}
},
emphasis: {
// color: '各异',
barBorderColor: 'rgba(0,0,0,0)', // 柱条边线
barBorderRadius: 0, // 柱条边线圆角，单位px，默认为0
barBorderWidth: 1, // 柱条边线线宽，单位px，默认为1
label: {
show: false
// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
}
}
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(255, 158, 68)'
}, {
offset: 1,
color: 'rgb(255, 70, 131)'
}])
},
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.onresize = myChart.resize;
myChart.on('click', function (params) {
alert('点击图片了');
});
})
</script>
</head>
<body>
<div>
<div id="main" style="margin:0 auto;width: 600px;height: 350px;border:1px solid #99a793"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../lib/reset.css">
<script src="../lib/jquery/jquery.min.js"></script>
<script src="../lib/echarts/echarts.js"></script>
<script>
$(function(){
var myChart=echarts.init($('#main')[0]);
var base = +new Date(1968, 9, 3);
var oneDay = 24 * 3600 * 1000;
var date = [];
var data = [Math.random() * 300];
for (var i = 1; i < 20000; i++) {
var now = new Date(base += oneDay);
date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
}
var option={
title: {
left: 'center',
text: '大数据量面积图',
textStyle:{
color:'#f00',
fontSize:16
}
},
tooltip: {
trigger: 'axis',
position: function (pt) {
return [pt[0], '10%'];
},
//当前鼠标位置
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
toolbox: {
feature: {
dataView: { //数据视图
show: true
},
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {},
}
},
xAxis: {
type: 'category',
boundaryGap: false,
//是否显示横向标准线
splitLine: {
show: false
},
data: date
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
//是否显示纵向标准线
splitLine: {
show: false
},
},
dataZoom: [{
type: 'inside',
start: 90,
end: 100
}, {
start: 0,
end: 10,
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}],
series: [
{
name: '模拟数据',
type: 'line',
smooth: true,
symbol: 'none',
sampling: 'average',
//曲线颜色
itemStyle: {
color: 'rgb(255, 70, 131)'
},
//曲线下方区域颜色
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(255, 158, 68)'
}, {
offset: 1,
color: 'rgb(255, 70, 131)'
}])
},
data: data
}
]
};
myChart.setOption(option);
});
</script>
</head>
<body>
<div id="main" style="margin:0 auto;width: 600px;height: 350px;border: 1px solid gray"></div>
</body>
</html>
浙公网安备 33010602011771号