echarts水印

由于某种原因尝试简单扩展一下 echarts 弄一个水印功能。

代码下载地址

http://download.csdn.net/detail/shen332401890/9393615

核心代码

//mingsigui add for watermarkdefine('echarts/component/watermark', [    'require',    './base',    'zrender/shape/Text',    'zrender/shape/Rectangle',    '../config',    'zrender/tool/util',    'zrender/tool/area',    'zrender/tool/color',    '../component'], function (require) {    var Base = require('./base');    var TextShape = require('zrender/shape/Text');    var RectangleShape = require('zrender/shape/Rectangle');    var ecConfig = require('../config');    ecConfig.watermark = {        zlevel: 0,        z: 6,        show: false,        text: '',        x: '0',        y: '0',row:2,column:2,        backgroundColor: 'rgba(0,0,0,0)',        borderColor: '#ccc',        borderWidth: 0,        textStyle: {            fontSize: 18,            fontWeight: 'bolder',            color: '#705'        }    };    var zrUtil = require('zrender/tool/util');    var zrArea = require('zrender/tool/area');    var zrColor = require('zrender/tool/color');    function WaterMark(ecTheme, messageCenter, zr, option, myChart) {        Base.call(this, ecTheme, messageCenter, zr, option, myChart);        this.refresh(option);    }    WaterMark.prototype = {        type: ecConfig.COMPONENT_TYPE_WARTERMARK,        _buildShape: function () {            if (!this.watermarkOption.show) {                return;            }//获取水印的坐标和宽高信息            this._itemGroupLocation = this._getItemGroupLocation();//创建TextShape            this._buildItem();//添加渲染            for (var i = 0, l = this.shapeList.length; i < l; i++) {                this.zr.addShape(this.shapeList[i]);            }        },        _buildItem: function () {            var text = this.watermarkOption.text;            var target = this.watermarkOption.target;            var font = this.getFont(this.watermarkOption.textStyle);for(var i=0,isize=this._itemGroupLocation.length;i<isize;i++){var x = this._itemGroupLocation[i].x;var y = this._itemGroupLocation[i].y;var width = this._itemGroupLocation[i].width;var height = this._itemGroupLocation[i].height;var textShape = {zlevel: this.getZlevelBase(),z: this.getZBase(),style: {y: y,x: x,color: this.watermarkOption.textStyle.color,text: text,textFont: font,textBaseline: 'top',opacity:0.5},highlightStyle: {color: zrColor.lift(this.watermarkOption.textStyle.color, 1),brushType: 'fill'},hoverable: false};if (this.watermarkOption.textAlign) {textShape.style.textAlign = subtextShape.style.textAlign = this.watermarkOption.textAlign;}this.shapeList.push(new TextShape(textShape));}                    },        _getItemGroupLocation: function () {            var text = this.watermarkOption.text;                 var font = this.getFont(this.watermarkOption.textStyle);            var subfont = this.getFont(this.watermarkOption.subtextStyle);            var totalWidth = zrArea.getTextWidth(text, font);            var totalHeight = zrArea.getTextHeight(text, font);            var x;            var zrWidth = this.zr.getWidth();           x = this.watermarkOption.x - 0;x = isNaN(x) ? 0 : x;                     var y;y = this.watermarkOption.y - 0;y = isNaN(y) ? 0 : y;                                        return this._getItemsLocation(x,y,totalWidth,totalHeight);        },_getItemsLocation:function(x,y,totalWidth,totalHeight){var canvasHeight = this.zr.getHeight();var canvasWidth = this.zr.getWidth();var c = this.watermarkOption.column;var r = this.watermarkOption.row;var c_gap = (canvasWidth-x) / c;var r_gap = (canvasHeight-y) / r;var result = [];for(var i=0;i<c;i++){for(var j=0;j<r;j++){result.push({x: x + c_gap*i,y: y + r_gap*j,width: totalWidth,height: totalHeight});}}return result;},        refresh: function (newOption) {            if (newOption) {                this.option = newOption;                this.option.watermark = this.reformOption(this.option.watermark);                this.watermarkOption = this.option.watermark;                this.watermarkOption.textStyle = this.getTextStyle(this.watermarkOption.textStyle);            }            this.clear();            this._buildShape();        }    };    zrUtil.inherits(WaterMark, Base);    require('../component').define('watermark', WaterMark);    return WaterMark;});//mingsigui add for watermark

使用方式

option = {    watermark : {      y:15,      row:10,      column:5,      show:true,        text: 'watermark',    },  title : {      show:false,        text: '未来一周气温变化',        subtext: '纯属虚构'    },    tooltip : {        trigger: 'axis'    },    legend: {        data:['最高气温','最低气温']    },    toolbox: {        show : true,        feature : {            mark : {show: true},            dataView : {show: true, readOnly: false},            magicType : {show: true, type: ['line', 'bar']},            restore : {show: true},            saveAsImage : {show: true}        }    },    calculable : true,    xAxis : [        {            type : 'category',            boundaryGap : false,            data : ['周一','周二','周三','周四','周五','周六','周日']        }    ],    yAxis : [        {            type : 'value',            axisLabel : {                formatter: '{value} °C'            }        }    ],    series : [        {            name:'最高气温',            type:'line',            data:[11, 11, 15, 13, 12, 13, 10],            markPoint : {                data : [                    {type : 'max', name: '最大值'},                    {type : 'min', name: '最小值'}                ]            },            markLine : {                data : [                    {type : 'average', name: '平均值'}                ]            }        },        {            name:'最低气温',            type:'line',            data:[1, -2, 2, 5, 3, 2, 0],            markPoint : {                data : [                    {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}                ]            },            markLine : {                data : [                    {type : 'average', name : '平均值'}                ]            }        }    ]};                                        

稍后提供下载demo下载链接