1、自己引入echarts库
2、找到代码中dataZoom中的handleIcon &＃xff0c;看见对应的是“M0,0 v9.7h5 v-9.7h-5 Z”&＃xff0c;这是由svg画出来的图形&＃xff0c;其中的数字是路径的参数字母的表示&＃xff0c;与canvas类似&＃xff0c;见下面解释
M &＃61; moveto
L &＃61; lineto
H &＃61; horizontal lineto
V &＃61; vertical lineto
C &＃61; curveto
S &＃61; smooth curveto
Q &＃61; quadratic Belzier curve
T &＃61; smooth quadratic Belzier curveto
A &＃61; elliptical Arc
Z &＃61; closepath
注意&＃xff1a;以上所有命令均允许小写字母。大写表示绝对定位&＃xff0c;小写表示相对定位。
“M0,0 v9.7h5 v-9.7h-5 Z”&＃xff1a;解释为&＃xff1a;笔移动到坐标&＃xff08;0&＃xff0c;0&＃xff09;点开始画笔&＃xff0c;相对当前位置&＃xff0c;向下走9.7&＃xff0c;再向左走5&＃xff0c; 再向上走9.7&＃xff08;向下-9.7&＃xff0c;即向上9.7&＃xff09;&＃xff0c;再向右走5&＃xff0c;最后关闭画笔
3、效果图
4.代码如下&＃xff0c;一定要自己引入echarts&＃xff0c;路径不一样
DOCTYPE html>
<html>
<head>
<meta charset&＃61;"UTF-8">
<title>title>
head>
<body><div id&＃61;"main" style&＃61;"width: 600px;height:400px;">div>
body>
<script type&＃61;"text/Javascript" src&＃61;"js/echarts.js">script>
<script type&＃61;"text/Javascript">
var option &＃61; { tooltip: {
//触发类型&＃xff0c;默认&＃xff08;&＃39;item&＃39;&＃xff09;数据触发&＃xff0c;可选为&＃xff1a;&＃39;item&＃39; | &＃39;axis&＃39;
trigger: &＃39;axis&＃39;
},
//图例&＃xff0c;每个图表最多仅有一个图例
legend: {
//显示策略&＃xff0c;可选为&＃xff1a;true&＃xff08;显示&＃xff09; | false&＃xff08;隐藏&＃xff09;&＃xff0c;默认值为true
show: true,
//水平安放位置&＃xff0c;默认为全图居中&＃xff0c;可选为&＃xff1a;&＃39;center&＃39; | &＃39;left&＃39; | &＃39;right&＃39; | {number}&＃xff08;x坐标&＃xff0c;单位px&＃xff09;
x: &＃39;center&＃39;,
//垂直安放位置&＃xff0c;默认为全图顶端&＃xff0c;可选为&＃xff1a;&＃39;top&＃39; | &＃39;bottom&＃39; | &＃39;center&＃39; | {number}&＃xff08;y坐标&＃xff0c;单位px&＃xff09;
y: &＃39;top&＃39;,
//legend的data: 用于设置图例&＃xff0c;data内的字符串数组需要与sereis数组内每一个series的name值对应
data: [&＃39;蒸发量&＃39;,&＃39;降水量&＃39;]
},
//工具箱&＃xff0c;每个图表最多仅有一个工具箱
toolbox: {
//显示策略&＃xff0c;可选为&＃xff1a;true&＃xff08;显示&＃xff09; | false&＃xff08;隐藏&＃xff09;&＃xff0c;默认值为false
show: true,
//启用功能&＃xff0c;目前支持feature&＃xff0c;工具箱自定义功能回调处理
feature: {
//辅助线标志
mark: {show: true}, //数据视图&＃xff0c;打开数据视图&＃xff0c;可设置更多属性,readOnly 默认数据视图为只读(即值为true)&＃xff0c;可指定readOnly为false打开编辑功能
dataView: {show: true, readOnly: true},
//magicType&＃xff0c;动态类型切换&＃xff0c;支持直角系下的折线图、柱状图、堆积、平铺转换
magicType: {show: true, type: [&＃39;line&＃39;, &＃39;bar&＃39;]},
//restore&＃xff0c;还原&＃xff0c;复位原始图表
restore: {show: true},
//saveAsImage&＃xff0c;保存图片&＃xff08;IE8-不支持&＃xff09;,图片类型默认为&＃39;png&＃39;
saveAsImage: {show: true}
}
},
xAxis: [
{
//显示策略&＃xff0c;可选为&＃xff1a;true&＃xff08;显示&＃xff09; | false&＃xff08;隐藏&＃xff09;&＃xff0c;默认值为true
show: true,
//坐标轴类型&＃xff0c;横轴默认为类目型&＃39;category&＃39;
type: &＃39;category&＃39;, //类目型坐标轴文本标签数组&＃xff0c;指定label内容。 数组项通常为文本&＃xff0c;&＃39;\n&＃39;指定换行
data: [&＃39;1月&＃39;,&＃39;2月&＃39;,&＃39;3月&＃39;,&＃39;4月&＃39;,&＃39;5月&＃39;,&＃39;6月&＃39;,&＃39;7月&＃39;,&＃39;8月&＃39;,&＃39;9月&＃39;,&＃39;10月&＃39;,&＃39;11月&＃39;,&＃39;12月&＃39;] }
],
dataZoom: [
{ type:"slider", /*类型*/
xAxisIndex:0, /*对应的轴*/
bottom:"10", /*位置&＃xff0c;定位*/
zoomLock:100, /*是否锁住&＃xff0c;不能缩放*/
start:0, /*开始*/
end:40, /*结束*/
handleIcon:"M0,0 v9.7h5 v-9.7h-5 Z", /*手柄的形状
M &＃61; moveto
L &＃61; lineto
H &＃61; horizontal lineto
V &＃61; vertical lineto
C &＃61; curveto
S &＃61; smooth curveto
Q &＃61; quadratic Belzier curve
T &＃61; smooth quadratic Belzier curveto
A &＃61; elliptical Arc
Z &＃61; closepath
以上所有命令均允许小写字母。大写表示绝对定位&＃xff0c;小写表示相对定位。
* */
handleStyle:{ /*手柄的样式*/
color:"#294b97",
borderColor:"#5476c2"
},
backgroundColor:"#f7f7f7", /*背景 */
dataBackground:{ /*数据背景*/
lineStyle:{
color:"#dfdfdf"
},
areaStyle:{
color:"#dfdfdf"
}
},
fillerColor:"rgba(220,210,230,0.6)", /*被start和end遮住的背景*/
labelFormatter:function (value,params) { /*拖动时两端的文字提示*/
var str &＃61; "";
if(params.length > 4){
str &＃61; params.substring(0,4)&＃43;"…";
}else {
str &＃61; params;
}
return str;
}
}
],
//直角坐标系中纵轴数组&＃xff0c;数组中每一项代表一条纵轴坐标轴&＃xff0c;仅有一条时可省略数值
//纵轴通常为数值型&＃xff0c;但条形图时则纵轴为类目型
yAxis: [
{
//显示策略&＃xff0c;可选为&＃xff1a;true&＃xff08;显示&＃xff09; | false&＃xff08;隐藏&＃xff09;&＃xff0c;默认值为true
show: true,
//坐标轴类型&＃xff0c;纵轴默认为数值型&＃39;value&＃39;
type: &＃39;value&＃39;,
//分隔区域&＃xff0c;默认不显示 ,,,栅格阴影效果
splitArea: {show: true}
}
], //sereis的数据: 用于设置图表数据之用。series是一个对象嵌套的结构&＃xff1b;对象内包含对象
series: [
{
//系列名称&＃xff0c;如果启用legend&＃xff0c;该值将被legend.data索引相关
name: &＃39;蒸发量&＃39;,
//图表类型&＃xff0c;必要参数&＃xff01;如为空或不支持类型&＃xff0c;则该系列数据不被显示。
type: &＃39;bar&＃39;,
//系列中的数据内容数组&＃xff0c;折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度&＃xff0c;并且他们间是一一对应的。数组项通常为数值
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
//系列中的数据标注内容
markPoint: {
data: [
{type: &＃39;max&＃39;, name: &＃39;最大值&＃39;},
{type: &＃39;min&＃39;, name: &＃39;最小值&＃39;}
]
},
//系列中的数据标线内容
markLine: {
data: [
{type: &＃39;average&＃39;, name: &＃39;平均值&＃39;}
]
}
},
{
//系列名称&＃xff0c;如果启用legend&＃xff0c;该值将被legend.data索引相关
name: &＃39;降水量&＃39;,
//图表类型&＃xff0c;必要参数&＃xff01;如为空或不支持类型&＃xff0c;则该系列数据不被显示。
type: &＃39;bar&＃39;,
//系列中的数据内容数组&＃xff0c;折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度&＃xff0c;并且他们间是一一对应的。数组项通常为数值
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
//系列中的数据标注内容
markPoint: {
data: [
{type: &＃39;max&＃39;, name: &＃39;最大值&＃39;},
{type: &＃39;min&＃39;, name: &＃39;最小值&＃39;}
]
},
//系列中的数据标线内容
markLine: {
data: [
{type: &＃39;average&＃39;, name: &＃39;平均值&＃39;}
]
}
}
]
}; var myChart &＃61; echarts.init(document.getElementById(&＃39;main&＃39;));
myChart.setOption(option);myChart.on("click",function(params){
console.log(params);
});script>
html>
京公网安备 11010802041100号