前端应用图表库

介绍：

一款适用于所有前端应用的图表库。

前端基础使用示例，具体使用数据请参考echarts控制器自行组合：

<canvas id="pie" class="charts"></canvas>
<script language="JavaScript">
var uChartsInstance = {};

function showCharts(id,data){
  const canvas = document.getElementById(id);
  const ctx = canvas.getContext("2d");
  canvas.width = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
  uChartsInstance[id] = new uCharts({
    type: "column",
    context: ctx,
    width: canvas.width,
    height: canvas.height,
    categories: data.categories,
    series: data.series,
    animation: true,
    background: "#FFFFFF",
    color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
    padding: [15,15,0,5],
    enableScroll: false,
    legend: {},
    xAxis: {
      disableGrid: true
    },
    yAxis: {
      data: [
        {
          min: 0
        }
      ]
    },
    extra: {
      column: {
        type: "group",
        width: 30,
        activeBgColor: "#000000",
        activeBgOpacity: 0.08
      }
    }
  });
  canvas.onclick = function(e) {
    uChartsInstance[e.target.id].touchLegend(getH5Offset(e));
    uChartsInstance[e.target.id].showToolTip(getH5Offset(e));
  };
  canvas.onmousemove=function(e) {
    uChartsInstance[e.target.id].showToolTip(getH5Offset(e));
  };
}

function getServerData() {
  //模拟从服务器获取数据时的延时
  setTimeout(() => {
    //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
    let res = {
        categories: ["2018","2019","2020","2021","2022","2023"],
        series: [
          {
            name: "目标值",
            data: [35,36,31,33,13,34]
          },
          {
            name: "完成量",
            data: [18,27,21,24,6,28]
          }
        ]
      };
    showCharts('pie', res);
  }, 500);
}

getServerData();
</script>

使用：

使用时参考echarts控制器的数据，自行将要展示的数据组合成对应的数组，每个类型所对应的数组，示例控制器已包含，可作为参考！

显示：

选择自己适合的图表类型，找到对应的页面，复制对应的图表实例化方法粘贴到显示的位置绑定对应的画布的ID元素即可！

引入：

自定义使用时，请引入/static/addons/echarts/js/u-charts.js文件，安装插件时默认已包含该文件。

柱状图系列：域名/echarts/index访问，效果如下

山峰图系列：域名/echarts/mount访问,效果如下

折线图系列：域名/echarts/line访问,效果如下

条状图系列：域名/echarts/bar访问，效果如下：

饼状图系列：域名/echarts/pie访问，效果如下：