npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

echarts-designer

v0.10.11

Published

基于echarts的图表设计器

Downloads

111

Readme

Echarts Designer

说明

  • echarts渲染组件
    • 基于百度echarts的图表渲染器,widgets下可自定义图表子组件
    • 自适应不同屏宽
    • 提供多种图表边框
  • 基于echarts的图表设计器。旨在让开发者只管报表数据逻辑
    • 动态设计图表,放大、缩小
    • 配置异步数据,并配有代码编辑器,可对异步数据进行简单的逻辑处理
    • 图表自由组合生成报表
  • 设计思路
    • echarts渲染组件以数据为驱动,设计器设计结果以数据形式将图表保存起来
    • 再根据保存的图表简单排序组合生成报表,并将结果保存
    • 报表渲染,直接将报表数据丢给echarts渲染组件

预览

本地预览

npm install

npm run serve

报表设计器
http://localhost:8080/#/

设计结果
http://localhost:8080/#/echarts

文档

用法

npm i echarts-designer -S
<template>
  <EchartsDesign
      class="design-wrapper"
      :echarts="charts"
      :authority="{ // token
          value: 'Vaf16dcf98O7c280d3287448f60o8abb5x28TVZV05179fd16edd177NXT6R',
      }"
      @chartNode="onChartNode"
      @reportNode="onReportNode"
      @delete="onDelete"
      @submitValues="onSubmit"
      @clickedChart="onClickedChart"
  />
</template>
import { Echarts, EchartsDesign, CoolNavigation, PerfectBorder } from "echarts-designer";
export default {
  components: { Echarts, EchartsDesign, CoolNavigation, PerfectBorder },
  methods: {
    onClickedChart(data) {
      console.log("clickedChart", data);
    },
    onSubmit({ type, data }) {
      console.log(type, data);
    },
    onChartNode(){},
    onReportNode(){},
    onDelete({ data, type }){
      console.log(type, data);
    },
  },
  data() {
    return {
      charts: {
        id: -1,
        title: "图表名称",
        theme: "", // dark|light
        background: "#fff",
        height: 1200,
        filter: { aaa: 123 },
        dataSource: {
          method: "get",
          url: "http://yapi.smart-xwork.cn/mock/99307/echarts/asyncPath",
        },
        listenKey: [],
        widget: "canvas",
        list: [
               {
            id: "1",
            title: "柱形图",
            widget: "bar",
            listenKey: [""],
            attribute: {
              name: "",
              padding: 0,
            },
            border: {
              type: "12",
              reverse: false,
              color: [],
            },
            px: {
              x: 0,
              y: 238,
              width: 349.9573699421966,
              height: 337,
              z: 1,
            },
            pct: {
              x: 0,
              y: 0.25400213447171827,
              width: 0.309971098265896,
              height: 0.35965848452508004,
            },
            dataSource: [
              {
                method: "get",
                url: "http://yapi.smart-xwork.cn/mock/99307/echarts/asyncPath",
              },
            ],
            codding: "",
            data: {
              title: {
                text: "IPQC白班良率统计",
                left: "left",
                textStyle: {
                  fontStyle: "normal",
                  color: "#f00",
                },
                subtext: "",
              },
              grid: {
                x: 50,
                y: 50,
                x2: 50,
                y2: 50,
              },
              legend: {
                orient: "horizontal",
                right: 10,
                top: 0,
                bottom: 0,
              },
              tooltip: {},
              dataset: {
                dimensions: ["product", "2015", "2016", "2017"],
                source: [
                  ["Matcha Latte", 43.3, 85.8, 93.7],
                  ["Milk Tea", 83.1, 73.4, 55.1],
                  ["Cheese Cocoa", 86.4, 65.2, 82.5],
                  ["Walnut Brownie", 72.4, 53.9, 39.1],
                ],
              },
              xAxis: {
                type: "category",
                axisLabel: {
                  formatter: "{value}",
                  align: "right",
                  rotate: "20",
                  interval: 0,
                },
              },
              yAxis: {
                name: "数量",
                axisLabel: {
                  formatter: "{value} 件",
                  align: "center",
                  position: "left",
                  margin: 28,
                },
              },
              series: [
                {
                  type: "bar",
                  seriesLayoutBy: "column",
                },
                {
                  type: "bar",
                  seriesLayoutBy: "column",
                },
                {
                  type: "line",
                  seriesLayoutBy: "column",
                },
              ]
            },
          },
        ],
      },
    };
  },
};