html-创建echarts图表

echarts官网示例

html部分：

<div id="first_chart" style="width: 600px;height:400px;"></div>

1、设置缩放比例

var clientWidth = document.documentElement.scrollWidth; // 获取屏幕尺寸
var scale = clientWidth / 1920; // 缩放比例

2、图表信息

function firstChart() {
  var myChart = echarts.init(document.getElementById("first_chart"));
  //指定图标的配置项和数据
  option = {
    legend: {
      left: "center",
      top: "6%",
      left: "2%",
      right: "3%",
      bottom: "4%",
      textStyle: {
        color: "#fff",
        fontSize: 12 * scale,
      },
    },
    series: [
      ...
    ],
  };
  //使用刚指定的配置项和数据显示图表
  myChart.setOption(option);
}

3、渲染图表

$(function () {
    firstChart();
    //当浏览器窗口大小发生改变时,重新渲染
    $(window).resize(function(){
        firstChart();
    });
});