JSFiddle - React, Tailwind, and code Playground

by bigfacewo

HTML

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/3.5.0/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/gridstack.js/0.3.0/gridstack.css">
<script src="https://cdn.bootcss.com/gridstack.js/0.3.0/gridstack.jQueryUI.min.js"></script>
<script src="https://cdn.bootcss.com/gridstack.js/0.3.0/gridstack.js"></script>
<script src="https://cdn.bootcss.com/gridstack.js/0.3.0/gridstack.all.js"></script>
<div class="grid-stack">
  <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="4">
    <div class="grid-stack-item-content" id="containner"></div>
  </div>
</div>
<button id="btn_to_pdf">
  to pdf
</button>

JavaScript

$('.grid-stack').gridstack();
var option = {
  "color": ["#dd6b66", "#759aa0", "#e69d87", "#8dc1a9", "#ea7e53", "#eedd78"],
  "legend": {
    "show": true,
    "orient": "horizontal",
    "left": "center",
    "top": "bottom",
    "formatter": "{name}",
    "bottom": 10,
    "data": ["销售额", "利润"],
    "textStyle": {}
  },
  "tooltip": {
    "trigger": "axis",
    "axisPointer": {
      "type": "shadow"
    }
  },
  "xAxis": [{
    "data": ["东北", "中南", "华东", "华北", "西北", "西南"],
    "show": true,
    "type": "category",
    "axisLine": {
      "show": true
    },
    "axisLabel": {
      "show": true
    }
  }],
  "yAxis": [{
    "show": true,
    "name": "销售额",
    "type": "value",
    "max": "dataMax",
    "min": 0,
    "boundaryGap": false,
    "axisLine": {
      "show": true,
      "lineStyle": {
        "color": "#dd6b66"
      }
    },
    "axisLabel": {
      "show": true,
      "textStyle": {
        "color": "#dd6b66"
      }
    }
  }, {
    "show": true,
    "name": "利润",
    "type": "value",
    "max": "dataMax",
    "min": 0,
    "boundaryGap": false,
    "axisLine": {
      "show": true,
      "lineStyle": {
        "color": "#759aa0"
      }
    },
    "axisLabel": {
      "show": true,
      "textStyle": {
        "color": "#759aa0"
      }
    }
  }],
  "series": [{
    "name": "销售额",
    "type": "bar",
    "data": [2807920, 4207900, 4604060, 2371156, 755681, 1370729],
    "yAxisIndex": 0
  }, {
    "name": "利润",
    "type": "bar",
    "data": [330317, 585228, 632224, 366698, 84208, 157763],
    "yAxisIndex": 1
  }]
}

var chart = echarts.init(document.getElementById('containner'), 'walden');
chart.setOption(option)

$('#btn_to_pdf').on('click', function() {
  html2canvas(document.body, {
      'allowTaint': true,
      onrendered: function(canvas) {
        document.body.appendChild(canvas)
      }
    })
    //            var pdf = new jsPDF();
    //            pdf.addHTML(document.body,100,100,null,function () {
    //               ...