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

esign-charts

v1.0.10

Published

基于百度echarts封装的图表组建库 ## Install ``` // install by yarn

Downloads

12

Readme

esign-charts

Introduction

基于百度echarts封装的图表组建库

Install

// install by yarn

yarn add esign-charts

// install by npm

npm i esign-charts

Quick Start

  // example

  import esignCharts from "esign-charts";

  // create方法返回了一个图表实例,通过这个实例可以调用echarts各种api
  esignCharts.create($dom, params);
  1. $dom:挂载图表的dom元素
  2. params:往图表传的参数,包含: * type(required):图表的类型,暂时只支持:bar、pie、line、china、world五种类型 * theme?:对图表做自定义的样式 (支持echarts主题在线构建工具-下载主题导出的主题内容) * title: 图表的名称,默认不显示,显示的话配置theme * subtext?: 二级名称,默认不显示,显示的话配置theme * dataSource:传入图表的数据,有固定格式的数据

Api

相关api调用方法,可通过create方法产生的实例去调用,具体api请参考echarts官网:戳我

theme详细

const theme = {
  /**
   * 全局颜色的配置
   * 颜色按使用的优先级依次放入color数组中
   */
  color: [
    '#58eeff',
    '#06799b',
    '#ffb248',
    '#8dc1a9',
    '#516b91',
    '#eedd78',
    '#73a373',
    '#73b9bc',
    '#7289ab',
    '#91ca8c',
    '#f49f42',
    '#ff6347',
    '#a092f1',
    '#0a915d',
    '#eaf889',
    '#6699FF',
    '#ff6666',
    '#3cb371',
    '#d5b158',
    '#38b6b6',
  ],

  // 背景色
  // backgroundColor: '#fff',

  // 标题
  title: {
    show: true,
    textStyle: {
      // fontSize: 24,
      // color: 'red',
    },
    subtextStyle: {
      // fontSize: 12,
      // color: '#aaaaaa',
    },

    // left: '50%',
    // top: '10%',
  },

  // 折线图的配置
  line: {
    itemStyle: {
      normal: {
        borderWidth: '2',
      },
    },
    lineStyle: {
      normal: {
        width: '2',
      },
    },
    smooth: false,
    series: {
      label: {
        show: false,
        color: '#86C9F4',
      },

      /**
       * 区域阴影
       * 默认全部透明,既无阴影
       */
      // areaStyle: {},
      /**
       * 曲线上线和点的颜色
       */
      itemStyle: {
        // borderColor: '#1E1F2C',
        // color: '#76D3FF',
      },
    },
  },

  // 柱状图的配置
  bar: {
    // xType: 'value', // 竖的柱子还是横的柱子
    // yType: 'category',
    itemStyle: {
      normal: {
        barBorderWidth: 0,
        barBorderColor: '#cccccc',
      },
      emphasis: {
        barBorderWidth: 0,
        barBorderColor: '#cccccc',
      },
    },
  },

  // 饼图的配置
  pie: {
    itemStyle: {
      normal: {
        borderWidth: 0,
        borderColor: '#cccccc',
      },
      emphasis: {
        borderWidth: 0,
        borderColor: '#cccccc',
      },
    },
    radius: ['30%', '50%'],
  },
  /**
   * 世界地图和中国地图的样式配置
   */
  map: {
    itemStyle: {
      normal: {
        areaColor: '#eeeeee',
        borderColor: '#444444',
        borderWidth: 0.5,
      },
      emphasis: {
        areaColor: 'rgba(255,215,0,0.8)',
        borderColor: '#444444',
        borderWidth: 1,
      },
    },
    label: {
      normal: {
        textStyle: {
          color: '#000000',
        },
      },
      emphasis: {
        textStyle: {
          color: 'rgb(100,0,0)',
        },
      },
    },
  },

  /**
   * 设置地图样式,区块样式,以及高亮的样式
   */
  // geo: {
  //   itemStyle: {
  //     normal: {
  //       areaColor: '#eeeeee',
  //       borderColor: '#444444',
  //       borderWidth: 0.5,
  //     },
  //     emphasis: {
  //       areaColor: 'rgba(255,215,0,0.8)',
  //       borderColor: '#444444',
  //       borderWidth: 1,
  //     },
  //   },
  //   label: {
  //     normal: {
  //       textStyle: {
  //         color: '#000000',
  //       },
  //     },
  //     emphasis: {
  //       textStyle: {
  //         color: 'rgb(100,0,0)',
  //       },
  //     },
  //   },

  //   // 设置地图放大尺寸
  //   layoutCenter: ['50%', '50%'],
  //   layoutSize: '120%',
  // },

  /**
   * 散点(气泡)图 和 带有涟漪特效动画的散点(气泡)图
   */
  // visualMap: {
  //   min: 0,
  //   max: 200,
  //   calculable: false,
  //   show: false,
  //   color: ['#d94e5d','#eac736','#50a3ba'],
  //   textStyle: {
  //       color: '#fff'
  //   }
  // },
  // effectScatter: {
  //   symbolSize: 20,
  //   rippleEffect: {}
  // },
  // scatter: {
  //   symbolSize: 20, // 圆的大小
  // },


  categoryAxis: {
    axisLine: {
      show: true,
      lineStyle: {
        color: '#e4e4e4',
      },
    },
    axisTick: {
      show: true,
      lineStyle: {
        color: '#e4e4e4',
      },
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: '#333',
      },
      rotate: 20,
    },
    splitLine: {
      show: false,
      lineStyle: {
        color: ['#ccc'],
      },
    },
    splitArea: {
      show: false,
      areaStyle: {
        color: [
          'rgba(250,250,250,0.3)',
          'rgba(200,200,200,0.3)',
        ],
      },
    },
  },
  /**
   * 工具栏
   * 默认隐藏了,需要使用的时候配置
   * pie bar line  可以设置
   */
  toolbox: {
    iconStyle: {
      normal: {
        borderColor: '#999999',
      },
      emphasis: {
        borderColor: '#666666',
      },
    },
  },

  // 图例
  // legend: {
  //   show: true,
  //   type: 'scroll',
  //   top: '10%',
  //   selector: ['all', 'inverse'],
  // },

  /**
   * 图例的弹出信息框
   * line bar 可以设置
   */
  // tooltip: {
  //   show: true,
  //   axisPointer: {
  //     type: 'cross',
  //     lineStyle: {
  //       color: '#cccccc',
  //       width: 1,
  //     },
  //     crossStyle: {
  //       color: '#cccccc',
  //       width: 1,
  //     },
  //   },
  // },

  /**
   * 滚动条样式设置
   * 默认隐藏滚动条
   */
  // dataZoom: {
  //   backgroundColor: 'rgba(47,69,84,0)',
  //   dataBackgroundColor: 'rgba(47,69,84,0.3)',
  //   fillerColor: 'rgba(167,183,204,0.4)',
  //   handleColor: '#a7b7cc',
  //   handleSize: '100%',
  //   textStyle: {
  //     color: '#333333',
  //   },
  // },
}

export default theme

dataSource

export default {
  // datasource: [
  //   {
  //     name: '172.28.90.107',

  //     // line bar
  //     data: [
  //       { name: 1579401300, value: 0.07 },
  //       { name: 1579401360, value: 0.07 },
  //       { name: 1579401420, value: 0.07 },
  //       { name: 1579401480, value: 0.06 },
  //     ],

  //     // pie
  //     // value: 70,
  //   },
  // ],

  // map
  datasource: {
    scatter: [
      { name: '山东', value: [117.1582, 36.8701] },
      { name: '河南', value: [113.4668, 34.6234] },
      { name: '江苏', value: [118.8062, 31.9208] },
      { name: '安徽', value: [117.29, 32.0581] },
      { name: '湖北', value: [114.3896, 30.6628] },
    ],
    effectScatter: [
      { name: '海门', value: [121.15, 31.89], },
      { name: '鄂尔多斯', value: [109.781327, 39.608266], },
      { name: '招远', value: [120.38, 37.35], },
    ],
  },
}

add new chart type

  1. cd src/configs
  2. add new chart file and edit file
  3. run yarn addOption or npm run addOption
  4. republish package