echarts基础 handleIcon 设置 `
//数据视图，打开数据视图，可设置更多属性,readOnly 默认数据视图为只读(即值为true)，可指定readOnly为false打开编辑功能 dataView: {show: true, readOnly: true}, //magicType，动态类型切换，支持直角系下的折线图、柱状图、堆积、平铺转换 magicType: {show: true, type: ['line', 'bar']}, //restore，还原，复位原始图表 restore: {show: true}, //saveAsImage，保存图片（IE8-不支持）,图片类型默认为'png' saveAsImage: {show: true} } }, xAxis: [ { //显示策略，可选为：true（显示） | false（隐藏），默认值为true show: true, //坐标轴类型，横轴默认为类目型'category' type: 'category',
//类目型坐标轴文本标签数组，指定label内容。 数组项通常为文本，'\n'指定换行 data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
} ], dataZoom: [ { type:"slider", /类型/ xAxisIndex:0, /对应的轴/ bottom:"10", /位置，定位/ zoomLock:100, /是否锁住，不能缩放/ start:0, /开始/ end:40, /结束/ handleIcon:"M0,0 v9.7h5 v-9.7h-5 Z", /*手柄的形状 M = moveto L = lineto H = horizontal lineto V = vertical lineto C = curveto S = smooth curveto Q = quadratic Belzier curve T = smooth quadratic Belzier curveto A = elliptical Arc Z = closepath 以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
- */ 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 = ""; if(params.length > 4){ str = params.substring(0,4)+"…"; }else { str = params; } return str; } } ], //直角坐标系中纵轴数组，数组中每一项代表一条纵轴坐标轴，仅有一条时可省略数值 //纵轴通常为数值型，但条形图时则纵轴为类目型 yAxis: [ { //显示策略，可选为：true（显示） | false（隐藏），默认值为true show: true, //坐标轴类型，纵轴默认为数值型'value' type: 'value', //分隔区域，默认不显示 ,,,栅格阴影效果 splitArea: {show: true} } ],
//sereis的数据: 用于设置图表数据之用。series是一个对象嵌套的结构；对象内包含对象 series: [ { //系列名称，如果启用legend，该值将被legend.data索引相关 name: '蒸发量', //图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。 type: 'bar', //系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度，并且他们间是一一对应的。数组项通常为数值 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: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ] }, //系列中的数据标线内容 markLine: { data: [ {type: 'average', name: '平均值'} ] } }, { //系列名称，如果启用legend，该值将被legend.data索引相关 name: '降水量', //图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。 type: 'bar', //系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度，并且他们间是一一对应的。数组项通常为数值 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: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ] }, //系列中的数据标线内容 markLine: { data: [ {type: 'average', name: '平均值'} ] } } ] };
var myChart = echarts.init(document.getElementById('main')); myChart.setOption(option);
myChart.on("click",function(params){ console.log(params); });
` 原文：https://www.cnblogs.com/muamaker/p/6229046.html
