Esign-charts NPM

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);

$dom：挂载图表的dom元素
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], },
    ],
  },
}