smart-chart

A chart library comprises other charts like echarts, d3 etc.

Note that the smart-chart dependent on echarts, you should install it separately.

Update records

|Features|Version|Date| |---|---|---| |Line, Bar, Horizontal Bar, Pie, Download|2.0.0-alpha.1|2020/09/03| |DataZoom, Auto Resize|2.0.0-alpha.2|2020/09/08| |MapChart + BarChart|2.0.0-alpha.3|2020/09/21| |Line Support AreaStyle, Pie support top statistic |2.0.0-alpha.5|2020/10/19| |Release 2.0.0|2.0.0|2020/11/13| |Line & Pie support config colors|2.1.0|2020/12/08| |Chart support get instance|2.2.0|2021/01/18|

Installition

npm i -S smart-chart

Usage

A common chart that you can switch chart type: line, bar, horizontal bar, pie. You just need one data structure.

import { Chart, XConfiguration, XChartType, XDataSerial } from 'smart-chart';

const chart = new Chart(document.getElementById('chart') as HTMLDivElement);

function changeChartType() {
  const types = Object.values(XChartType);
  const type = types[this.nextType++ % types.length];

  const configuration: XConfiguration = {
    type,
    serials: [
      {
        name: 'item1',
        data: [['2020-09-01', 11], ['2020-09-02', 17], ['2020-09-03', 17]],
      },
      {
        name: 'item2',
        data: [['2020-09-01', 17], ['2020-09-02', 13], ['2020-09-03', 14]],
      },
      {
        name: 'item3',
        data: [['2020-09-01', 7], ['2020-09-02', 13], ['2020-09-03', 13]],
      }
    ],
    optionConfiguration: {
      useDataZoom: false,
      useAreaStyle: false,
      pieTopCount: 0,
    },
  };
  chart.render(configuration);
}

Download image

chart.download('Saved file name').then((v: string) => {
  console.log(v);
}).catch((e: Error) => {
  console.log(e);
});

Or use it in JS

<script src="path/to/dist/index.js"></script>

const chart = new SmartChart.Chart(document.getElementById('chart'));

MapChart

import { ChinaMap, XGeoConfiguration, XGeoData } from 'smart-chart';

const chart = new ChinaMap(document.getElementById('chart') as HTMLDivElement);

const mockData: XGeoConfiguration = {
  data: [
        {
          name: 'A',
          value: 10,
          coords: [118.8062, 31.9208],
        },
        {
          name: 'B',
          value: 32,
          coords: [127.9688, 45.368],
        },
        {
          name: 'C',
          value: 43,
          coords: [110.3467, 41.4899],
        },
        {
          name: 'D',
          value: 54,
          coords: [125.8154, 44.2584],
        },
  ],
  targetCoords: [103.5901, 36.3043],
  mapName: '区域数据',
  topName: 'Top 6',
  barName: 'Top 20',
}

chart.renderChart(mockData);

Examples