echarts-start

基于 echarts 的 react, vue 桥接库.

集成各种 options；各种事件；以及 loading，resize 方法；(并不是一个完整的图表解决方案，仅仅桥接写法)

Usage

react

1、dependence
yarn add @echarts-start/react-bridge
2、use
<Chart
  style={{ width: "100%", height: 400 }}
  resize
  loading={loading}
  onChartClick={(e) => {
    console.log("click events=", e);
  }}>
  <XAxis type={"category"} />
  <YAxis />
  <Tooltip trigger={"axis"} />
  <Legend />
  <Series type={"line"} />
  <Series type={"line"} />
  <Series type={"line"} />
  <Dataset dimensions={dimensions} source={datasetData} />
</Chart>

详细说明

vue

1、dependence
yarn add @echarts-start/vue-bridge
2、use
<Chart
  style="width: 100%; height: 400px"
  backgroundColor="rgba(0,0,0,0.1)"
  :loading="loading"
  :resize="true"
  :onChartClick="handleChartClick"
>
  <XAxis type="category" />
  <YAxis />
  <Dataset :source="chartData" :dimensions="dimensions" />
  <Series type="line" />
  <Series type="line" />
  <Series type="line" />
  <Tooltip trigger="axis" />
  <Legend />
</Chart>

详细说明

Demo (vue and react)

$ git clone https://github.com/zxeryu/echarts-start
$ cd echarts-start
$ yarn install
//react demo
$yarn start
//vue demo
$yarn start-v

step (开发思路)

1.echarts方法和属性转换为react、vue的组件化语法（已完成）
2.支持单图表（已完成）
3.支持多图表（已完成）
4.series抽象，如Line、Interval、Pie等
5.兼容多种图表