echarts使用技巧、常用配置和api，使用教程

按需引入(https://github.com/apache/incubator-echarts/blob/master/index.js)

tooltip提示框添加点击事件：

tooltip: {
	enterable: true  //鼠标是否可进入提示框浮层中
},

tooltip显示超出视图范围的解决方法

• 将tooltip限制在容器内

tooltip: {
	confine: true
},

• 为tooltip添加额外样式

tooltip: {
	extraCssText: 'z-index:999'
},

富文本

label: {
    normal: {
        formatter: '{a|{c}}\n{b|{b}}\n{hr|}\n\n\n',
        rich: {
            a: {
                fontSize: 18,
                lineHeight: 25,
                align: 'left'
            },
            b: {
                align: 'left',
                fontSize: 12,
                lineHeight: 12,
                color: "#999999"
            },
        }
    }
}
// 或者
tooltip : {
   formatter: function (params) {
     return  “名称：” +params.name
  }
}
tooltip: {
	 formatter: function(a) {
		 return '
' + a + '
'
}
}
// x轴和y轴的

柱状图等数据量大，可设置为可拖动状态或者添加滚动条

• 拖动

dataZoom: [
  {
     type: 'inside', // 内置在坐标系中 通过鼠标滚轮或者手指touch进行处罚
     start: 50,
     end: 100
  }
]

• 底部滚动条

dataZoom: [
  {
     type: 'slider', // 在外部 显示为滑动条形的一个组件,可直接拖动使用
     start: 50,
     end: 100
  }
]

x轴文字过长的处理方法

• 设置文字倾斜

xAxis: {
	axisLabel: {
		 rotate:40  
	}	
}

• 设置文字换行

xAxis: {
	axisLabel: {
		interval: 0,
		formatter:function(value)
		{
			return value.split("").join("\n");
		}
	}
}

控制图的大小

grid: {
	top: '10%',
	right: '10%',
	bottom: '10%',
	left: '10%'
},

堆叠柱状图的配置方式

series: [{
	name: '高于拿地版',
	type: 'bar',
	barWidth: '24', 
	stack: 'cost', // 代表叠加的形态，如果去掉这个，该条就会单独出来
	data: [20,30,10]
},
{
	name: '与拿地版持平',
	type: 'bar',
	barWidth: '24',
	stack: 'cost',
	data: [10,20,30]
}]

柱状图设置中位线/平均线

series: [{
	type: 'bar',
	data: [],
	markLine: {
		symbol: "none",  // 去除平均线的箭头
		data: [
			{
				type: 'average', 
				name: '平均线', 
				lineStyle: {
					width: 1,
					color: "#D7372F"
				},
				label: {
					fontSize: 11,
					lineHeight: 15,
					color: '#666666',
					position: 'insideEndTop',
					formatter: '{b}：{c}',
				},
			}
		]
	}
}]
或
series: [{
	type: 'bar',
	data: [10,20,10],
},{
	type: 'line',
	data: [10,20,10],
	markLine: {
		symbol: "none",  // 去除平均线的箭头
		data: [
			{
				type: 'average', 
				name: '平均线', 
				lineStyle: {
					width: 1,
					color: "#D7372F"
				},
				label: {
					fontSize: 11,
					lineHeight: 15,
					color: '#666666',
					position: 'insideEndTop',
					formatter: '{b}：{c}',
				},
			}
		]
	}
}]

地图

• 绘制地图

// zoneJson为要渲染的地图json
echarts.registerMap('zone', zoneJson);
option = {
	geo: { 
		map: 'zone', // 地图
		zoom: 1.2, 
		roam: true, // 地图可拖动
		label: {
			normal: {
				show: true, // 是否显示对应地名
			}
		},
	},
}

常用方法/API

• 事件绑定

// on(eventName,function)  
// ('click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu')
myChart.on('click', function (params) {
		console.log(params.name);
});
 //chart.on(eventName, query, handler)
 // 使用 query 只对指定的组件的图形元素的触发回调
chart.on('click', 'series', function () {})
chart.on('click', 'series.line', function () {})
chart.on('click', 'dataZoom', function () {})
chart.on('click', 'xAxis.category', function () {})

// 例: 给x轴的文字添加点击事件，y轴同理
// 将xAxis或者yAxis的属性triggerEvent 置为 true;
chart.on('click', 'xAxis', function () {})

• 解绑

// 移除事件（避免点击事件重复促发）
myChart.off('click')

• 显示/关闭loading

myChart.showLoading({
    text: "图表数据正在努力加载...",
    x: "center",
    y: "center",
    textStyle: {
        color:"red",
        fontSize:14
    },
    effect:"spin"
});
myChart.hideLoading();

• resize() 图表随浏览器窗口大小改变

window.onresize = this.myChart.resize

• clear() 清空绘画内容，清空后实例可用

myChart.clear()

• dispose() 释放图表实例，释放后实例不再可用

myChart.dispose()

• getDataURL() 导出图表图片，返回一个 base64 的 URL，可以设置为Image的src

// 可选png, jpeg
myChart.getDataURL("png")

通过dispatchAction触发图表行为

• highlight 高亮/downplay取消高亮

myChart.dispatchAction({
		type: 'highlight', // highlight/ downplay
		seriesIndex: 0,  // series数组里面的下标
		dataIndex: 0   // 数据的下标
});
myChart.dispatchAction({
    type: 'highlight',
    // 可选，系列 index，可以是一个数组指定多个系列
    seriesIndex?: number|Array,
    // 可选，系列名称，可以是一个数组指定多个系列
    seriesName?: string|Array,
    // 可选，数据的 index
    dataIndex?: number,
    // 可选，数据的 名称
    name?: string
})

• legendSelect 选中图例/legendUnSelect 取消选中图例/legendToggleSelect 切换图例的选中状态

myChart.dispatchAction({
    type: 'legendSelect',
    // 图例名称
    name: string
})

• legendScroll 控制图例的滚动

myChart.dispatchAction({
    type: 'legendScroll',
    scrollDataIndex: number,
    legendId: string
})

• legendScroll 控制图例的滚动

myChart.dispatchAction({
    type: 'legendScroll',
    scrollDataIndex: number,
    legendId: string
})

• showTip 显示提示框/hideTip 隐藏提示框

myChart.dispatchAction({
    type:'showTip',
    //屏幕上的x坐标
    x: number,
    //屏幕上的y坐标
    y: number,
    //本次显示tooltip的位置，只在本次action生效。缺省则使用option中定义的tooltip位置
    position: Array.<number> | String | Function
})
// 或
myChart.dispatch({
    type: 'showTip',
    // 系列的 index，在 tooltip 的 trigger 为 axis 的时候可选。
    seriesIndex?: number,
    // 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据
    dataIndex?: number,
    // 可选，数据名称，在有 dataIndex 的时候忽略
    name?: string,
    // 本次显示 tooltip 的位置。只在本次 action 中生效。
    // 缺省则使用 option 中定义的 tooltip 位置。
    position: Array.<number>|string|Function,
})

持续更新…