|
|
@@ -0,0 +1,227 @@
|
|
|
+
|
|
|
+ * Created by chengwb on 2016/9/3.
|
|
|
+ */
|
|
|
+(function (global) {
|
|
|
+ global.tools = global.tools || {};
|
|
|
+
|
|
|
+
|
|
|
+ * echarts tooltip轮播
|
|
|
+ * @param chart ECharts实例
|
|
|
+ * @param chartOption echarts的配置信息
|
|
|
+ * @param options object 选项
|
|
|
+ * {
|
|
|
+ * interval 轮播时间间隔，单位毫秒，默认为2000
|
|
|
+ * loopSeries boolean类型，默认为false。
|
|
|
+ * true表示循环所有series的tooltip，false则显示指定seriesIndex的tooltip
|
|
|
+ * seriesIndex 默认为0，指定某个系列（option中的series索引）循环显示tooltip，
|
|
|
+ * 当loopSeries为true时，从seriesIndex系列开始执行。
|
|
|
+ * updateData 自定义更新数据的函数，默认为null；
|
|
|
+ * 用于类似于分页的效果，比如总数据有20条，chart一次只显示5条，全部数据可以分4次显示。
|
|
|
+ * }
|
|
|
+ * @returns {{clearLoop: clearLoop}}
|
|
|
+ */
|
|
|
+ tools.loopShowTooltip = function (chart, chartOption, options) {
|
|
|
+ let defaultOptions = {
|
|
|
+ interval: 2000,
|
|
|
+ loopSeries: false,
|
|
|
+ seriesIndex: 0,
|
|
|
+ updateData: null
|
|
|
+ };
|
|
|
+
|
|
|
+ if (!chart || !chartOption) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ let dataIndex = 0;
|
|
|
+ let seriesIndex = 0;
|
|
|
+ let timeTicket = 0;
|
|
|
+ let seriesLen = chartOption.series.length;
|
|
|
+ let dataLen = 0;
|
|
|
+ let chartType;
|
|
|
+ let first = true;
|
|
|
+ let lastShowSeriesIndex = 0;
|
|
|
+ let lastShowDataIndex = 0;
|
|
|
+ if (seriesLen === 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ if (options) {
|
|
|
+ options.interval = options.interval || defaultOptions.interval;
|
|
|
+ options.loopSeries = options.loopSeries || defaultOptions.loopSeries;
|
|
|
+ options.seriesIndex = options.seriesIndex || defaultOptions.seriesIndex;
|
|
|
+ options.updateData = options.updateData || defaultOptions.updateData;
|
|
|
+ } else {
|
|
|
+ options = defaultOptions;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ if (options.seriesIndex < 0 || options.seriesIndex >= seriesLen) {
|
|
|
+ seriesIndex = 0;
|
|
|
+ } else {
|
|
|
+ seriesIndex = options.seriesIndex;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ * 清除定时器
|
|
|
+ */
|
|
|
+ function clearLoop() {
|
|
|
+ if (timeTicket) {
|
|
|
+ clearInterval(timeTicket);
|
|
|
+ timeTicket = 0;
|
|
|
+ }
|
|
|
+ chart.off('mousemove', stopAutoShow);
|
|
|
+ zRender.off('mousemove', zRenderMouseMove);
|
|
|
+ zRender.off('globalout', zRenderGlobalOut);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ * 取消高亮
|
|
|
+ */
|
|
|
+ function cancelHighlight() {
|
|
|
+
|
|
|
+ * 如果dataIndex为0表示上次系列完成显示，如果是循环系列，且系列索引为0则上次是seriesLen-1，否则为seriesIndex-1；
|
|
|
+ * 如果不是循环系列，则就是当前系列；
|
|
|
+ * 如果dataIndex>0则就是当前系列。
|
|
|
+ */
|
|
|
+ let tempSeriesIndex = dataIndex === 0 ?
|
|
|
+ (options.loopSeries ?
|
|
|
+ (seriesIndex === 0 ? seriesLen - 1 : seriesIndex - 1)
|
|
|
+ : seriesIndex)
|
|
|
+ : seriesIndex;
|
|
|
+ let tempType = chartOption.series[tempSeriesIndex].type;
|
|
|
+
|
|
|
+ if (tempType === 'pie' || tempType === 'radar') {
|
|
|
+ chart.dispatchAction({
|
|
|
+ type: 'downplay',
|
|
|
+ seriesIndex: lastShowSeriesIndex,
|
|
|
+ dataIndex: lastShowDataIndex
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ * 自动轮播tooltip
|
|
|
+ */
|
|
|
+ function autoShowTip() {
|
|
|
+ let invalidSeries = 0;
|
|
|
+ let invalidData = 0;
|
|
|
+
|
|
|
+ function showTip() {
|
|
|
+
|
|
|
+ if (dataIndex === 0 && !first && typeof options.updateData === "function") {
|
|
|
+ options.updateData();
|
|
|
+ chart.setOption(chartOption);
|
|
|
+ }
|
|
|
+
|
|
|
+ let series = chartOption.series;
|
|
|
+ let currSeries = series[seriesIndex];
|
|
|
+ if (!series || series.length === 0 ||
|
|
|
+ !currSeries || !currSeries.type || !currSeries.data ||
|
|
|
+ !currSeries.data.length) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ chartType = currSeries.type;
|
|
|
+ dataLen = currSeries.data.length;
|
|
|
+
|
|
|
+ let tipParams = {seriesIndex: seriesIndex};
|
|
|
+ switch (chartType) {
|
|
|
+ case 'pie':
|
|
|
+ case 'map':
|
|
|
+ case 'chord':
|
|
|
+ tipParams.name = currSeries.data[dataIndex].name;
|
|
|
+ break;
|
|
|
+ case 'radar':
|
|
|
+ tipParams.seriesIndex = seriesIndex;
|
|
|
+ tipParams.dataIndex = dataIndex;
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ tipParams.dataIndex = dataIndex;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (chartType === 'pie' || chartType === 'radar') {
|
|
|
+ if (!first) {
|
|
|
+ cancelHighlight();
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ chart.dispatchAction({
|
|
|
+ type: 'highlight',
|
|
|
+ seriesIndex: seriesIndex,
|
|
|
+ dataIndex: dataIndex
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ tipParams.type = 'showTip';
|
|
|
+
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ chart.dispatchAction(tipParams);
|
|
|
+ }, 0);
|
|
|
+
|
|
|
+ lastShowSeriesIndex = seriesIndex;
|
|
|
+ lastShowDataIndex = dataIndex;
|
|
|
+ dataIndex = (dataIndex + 1) % dataLen;
|
|
|
+ if (options.loopSeries && dataIndex === 0) {
|
|
|
+ invalidData = 0;
|
|
|
+ seriesIndex = (seriesIndex + 1) % seriesLen;
|
|
|
+ if (seriesIndex === options.seriesIndex) {
|
|
|
+ invalidSeries = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ first = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ showTip();
|
|
|
+ timeTicket = setInterval(showTip, options.interval);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ function stopAutoShow() {
|
|
|
+ if (timeTicket) {
|
|
|
+ clearInterval(timeTicket);
|
|
|
+ timeTicket = 0;
|
|
|
+
|
|
|
+ if (chartType === 'pie' || chartType === 'radar') {
|
|
|
+ cancelHighlight();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let zRender = chart.getZr();
|
|
|
+
|
|
|
+ function zRenderMouseMove(param) {
|
|
|
+ if (param.event) {
|
|
|
+
|
|
|
+ param.event.cancelBubble = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ stopAutoShow();
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ function zRenderGlobalOut() {
|
|
|
+ if (!timeTicket) {
|
|
|
+ autoShowTip();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ chart.on('mousemove', stopAutoShow);
|
|
|
+ zRender.on('mousemove', zRenderMouseMove);
|
|
|
+ zRender.on('globalout', zRenderGlobalOut);
|
|
|
+
|
|
|
+ autoShowTip();
|
|
|
+
|
|
|
+ return {
|
|
|
+ clearLoop: clearLoop
|
|
|
+ };
|
|
|
+ };
|
|
|
+})(window);
|
tongshangming
1 year ago
