eCharts公用配置及方法

eCharts公用配置及方法

文章目录：

• 正在加载使用方法
• 清除图表实例方法
• 刷新图表宽高方法（适应容器大小）
• 下载生成的图片到本地
• 圆点绘制（悬浮提示框中）
• 文字左对齐（悬浮提示框）
• 纵坐标刻度梯度量设置

---

正在加载方法

var myEchart = echarts.init( document.getElementById(domId) );

myEchart.showLoading(); //显示正在加载

var option = {};

myEchart.hideLoading(); //隐藏正在加载

myEchart.setOption(option);

备注：请求数据前执行showLoading()，数据请求成功后执行hideLoading()

---

清除图表实例方法

var myEchart = echarts.init( document.getElementById(domId) );

var option = {};

myEchart.setOption(option);

myEchart.clear();   //清除图表实例

备注：清空当前实例，会移除实例中所有的组件和图表。清空后调用 getOption() 方法返回一个{}空对象。

---

刷新图表宽高方法（适应容器大小）

var myEchart = echarts.init( document.getElementById(domId) );

var option = {};

myEchart.setOption(option);

myEchart.resize();  //自动适应容器大小

备注：指定图表宽高时，需要传入参数在opts。

(opts?: {
    width?: number|string,  //可显式指定实例宽度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的宽度。
    height?: number|string, //可显式指定实例高度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的高度。
    silent?: boolean        //是否禁止抛出事件。默认为 false。
}) => ECharts

---

下载生成的图片到本地

/**
 * 保存当前eChart显示的图像，自动下载到本地
 * @param  {String} echart     eChart的上下文
 * @param  {String} imgType    图片扩展名类型
 */
function saveAsImage( echart, imgType ) {
    imgType = String( imgType );
    var imgData = echart.getDataURL({     // 保存到本地的图片数据
        type: imgType,                    // 图片扩展名类型
        pixelRatio: 2,
        backgroundColor: '#fff'           // 图片背景颜色
    });

    var newDate = new Date();
    var dateString = '';
    dateString += newDate.getFullYear();
    var month = Number( newDate.getMonth()+1 );
    month = month < 10 ? '0'+month : month;
    dateString += month;
    dateString += newDate.getDate();

    var filename = echart.getOption().title[0].text + '_' + dateString + '.' + imgType;

    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = imgData;
    save_link.download = filename;

    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);
}

saveAsImage( myEchart, 'jpg' );

---

圆点绘制（悬浮提示框中）

tooltip: {
            trigger: 'axis',
            formatter: function( a ) {
                var color = '#78d5ce';
                var icon = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + '"></span>';
                return a[0].name+'<br/>'+icon+a[0].seriesName+'：'+a[0].value
            }
        },

---

文字左对齐（悬浮提示框）

tooltip: {
            trigger: 'axis',
            textStyle:{
                align: 'left'   // 文字左对齐
            }
        }

---

纵坐标刻度梯度量设置

yAxis: [
            {
                type: 'value',
                name: json.zName,
                nameTextStyle: {
                    color: '#6d9269'
                },
//                 interval: 500,       // 刻度的量值，不设置自动处理
                axisTick: {         // 轴的刻度
                    show: false
                },
                axisLine: {         // 轴线
                    show: false
                },
                splitLine: {        // 竖线
                    show: false
                }
            }
        ]

---