echarts图表设置文字水印效果代码-html代码-BFW代码库

echarts图表设置文字水印效果代码

代码语言：html

所属分类：图表

代码描述：echarts图表设置文字水印效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
	background-color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px; 
	color: #000;
}

#main	{
	width: 1200px;
	height: 800px;
}
</style>



</head>

<body >
  <div id="main"></div>
   

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.5.1.1.js"></script>
      <script  >
// based ready dom, initialize echarts instance 
var chart = echarts.init(document.getElementById('main'));

var builderJson = {
  "all": 10887,
  "charts": {
    "map": 3237,
    "lines": 2164,
    "bar": 7561,
    "line": 7778,
    "pie": 7355,
    "scatter": 2405,
    "candlestick": 1842,
    "radar": 2090,
    "heatmap": 1762,
    "treemap": 1593,
    "graph": 2060,
    "boxplot": 1537,
    "parallel": 1908,
    "gauge": 2107,
    "funnel": 1692,
    "sankey": 1568 },

  "components": {
    "geo": 2788,
    "title": 9575,
    "legend": 9400,
    "tooltip": 9466,
    "grid": 9266,
    "markPoint": 3419,
    "markLine": 2984,
    "timeline": 2739,
    "dataZoom": 2744,
    "visualMap": 2466,
    "toolbox": 3034,
    "polar": 1945 },

  "ie": 9743 };


var downloadJson = {
  "echarts.min.js": 17365,
  "echarts.simple.min.js": 4079,
  "echarts.common.min.js": 6929,
  "echarts.js": 14890 };


var themeJson = {
  "dark.js": 1594,
  "infographic.js": 925,
  "shine.js": 1608,
  "roma.js": 721,
  "macarons.js": 2179,
  "vintage.js": 1982 };


var waterMarkText = 'ECHARTS';

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = 100;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.globalAlpha = 0.08;
ctx.font = '20px Microsoft Yahei';
ctx.translate(50, 50);
ctx.rotate(-Math.PI / 4);
ctx.fillText(waterMarkText, 0, 0);

option = {
  backgroundColor: {
    type: 'pattern',
    image: canvas,
    repeat: 'repeat' },

  tooltip: {},
  title: [{
    text: 'Online build',
    subtext: 'Total ' + builderJson.all,
    x: '25%',
    textAlign: 'center' },
  {
    text: 'Download each version',
    subtext: 'Total ' + Object.keys(downloadJson).reduce(function (all, key) {
      return all + downloadJson[key];
    }, 0),
    x: '75%',
    textAlign: 'center' },
  {
    text: 'Theme download',
    subtext: &#.........完整代码请登录后点击上方下载按钮下载查看