# tsign-charts

> ## install You can install this package yarn or npm

Latest version **1.0.16** (published 2020-02-03) · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install tsign-charts
pnpm add tsign-charts
yarn add tsign-charts
bun add tsign-charts
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.16 |
| Published | 2020-02-03 |
| First published | 2020-02-03 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 1 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | linxiaofen |

## Links

- npm: https://www.npmjs.com/package/tsign-charts
- npm.io page: https://npm.io/package/tsign-charts

## Dependencies (2)

- [core-js](https://npm.io/package/core-js.md) ^3.4.3
- [echarts](https://npm.io/package/echarts.md) ^4.6.0

## Recent versions

- 1.0.16 (latest) — 2020-02-03
- 1.0.15 — 2020-02-03
- 1.0.14 — 2020-02-03
- 1.0.13 — 2020-02-03
- 1.0.12 — 2020-02-03
- 1.0.11 — 2020-02-03
- 1.0.10 — 2020-02-03
- 1.0.9 — 2020-02-03
- 1.0.8 — 2020-02-03
- 1.0.7 — 2020-02-03
- 1.0.6 — 2020-02-03
- 1.0.5 — 2020-02-03
- 1.0.4 — 2020-02-03
- 1.0.3 — 2020-02-03
- 1.0.2 — 2020-02-03
- … 1 more at https://npm.io/package/tsign-charts/versions

## README

# tsign-charts

## install
You can install this package <font color=red >yarn</font> or <font color=red >npm</font>

## usage
```
  // example

  import tsignCharts from "tsign-charts";

  tsignCharts.createChart($dom, params);

```
 1. <font color=red >$dom</font>：挂载图表的dom元素
 2.  <font color=red >params</font>：往图表传的参数，包含：
    * type（required）：图表的类型，暂时只支持：bar、pie、line、china、world五种类型
    * theme？：对图表做自定义的样式
    * title： 图表的名称，默认不显示，显示的话配置theme
    * subtext？： 二级名称，默认不显示，显示的话配置theme
    * dataSource：传入图表的数据，有固定格式的数据

### 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%',
  // },

  /**
   * 带有涟漪特效动画的散点（气泡）图
   */
  // effectScatter: {
  //   itemStyle: {
  //     normal: {
  //       borderWidth: 0,
  //       borderColor: '#cccccc',
  //     },
  //     emphasis: {
  //       borderWidth: 0,
  //       borderColor: '#cccccc',
  //     },
  //   },
  // },

  /**
   * 散点（气泡）图
   */
  // scatter: {
  //   itemStyle: {
  //     normal: {
  //       borderWidth: 0,
  //       borderColor: '#cccccc',
  //     },
  //     emphasis: {
  //       borderWidth: 0,
  //       borderColor: '#cccccc',
  //     },
  //   },
  // },
  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

---
_Source: https://npm.io/package/tsign-charts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._