Echarts基础学习 7-graphic和可拖拽点

graphic

graphic原意也是“图表”，graphic类似于Css的position:absolute属性，在原有的图表上，画一个新图表。

<div class="echart">
	<div class="graphic" style="positon: absolute; z-index: 100">
	</div>
</div

通过下面两张图明确graphic的效果

type：group

在官网示例代码中可以看到，graphic是可以配置多个图形元素的。其中type:'group可以嵌套子节点。上图的水印就是由一个文本和一个矩形组合而成的。

Echarts事件 dispatchAction 和 on

请先阅读setOption和converToPixel官网文档:https://echarts.apache.org/zh/api.html#echartsInstance.setOption

setOption

设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过 setOption 完成，ECharts 会合并新的参数和数据，然后刷新图表。如果开启动画的话，ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

convertToPixel

在直角坐标系（cartesian，grid）上，把某个点的坐标转换成为像素坐标：

// [300, 900] 表示该点 x 轴上对应刻度值 300，y 轴上对应刻度值 900。
// 注意，一个 grid 可能含有多个 xAxis 和多个 yAxis，任何一对 xAxis-yAxis 形成一个 cartesian。
// 使用第三个 xAxis 和 id 为 'y1' 的 yAxis 形成的 cartesian 进行转换：
chart.convertToPixel({xAxisIndex: 2, yAxisId: 'y1'}, [300, 900]);
// 使用 id 为 'g1' 的 grid 的第一个 cartesian 进行转换：
chart.convertToPixel({gridId: 'g1'}, [300, 900]);

ECharts 中的事件有两种，一种是鼠标事件，在鼠标点击某个图形上会触发，还有一种是 调用 dispatchAction 后触发的事件。dispatchAction就是手动触发。以events中的dataZoom和action中的dataZoom为例，

绑定一个数据区缩放后的事件：

myChart.on('dataZoom', handleFun);

手动触发：

myChart.dispatchAction({
	type: 'dataZoom',
	start: 10,
	end: 20
})

相关案例：案例代码

代码中的某些逻辑：setTimout确保在图表渲染完成后绑定组件，setOption用来更新图表