# editable-chart

> A Vue.js project

Latest version **1.0.19** (published 2019-06-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install editable-chart
pnpm add editable-chart
yarn add editable-chart
bun add editable-chart
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.19 |
| Published | 2019-06-28 |
| First published | 2019-05-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 15.5 MB |
| Known vulnerabilities | 0 (+3 in 3 direct dependencies) |
| Install scripts | no |
| Author | zhangjing |
| Maintainers | zhangjing8273 |

## Links

- npm: https://www.npmjs.com/package/editable-chart
- npm.io page: https://npm.io/package/editable-chart

## Dependencies (5)

- [vue](https://npm.io/package/vue.md) ^2.5.11
- [echarts](https://npm.io/package/echarts.md) ^4.2.1
- [element-ui](https://npm.io/package/element-ui.md) ^2.8.2
- [handsontable](https://npm.io/package/handsontable.md) ^7.0.2
- [@handsontable/vue](https://npm.io/package/@handsontable/vue.md) ^4.0.0

## Recent versions

- 1.0.19 (latest) — 2019-06-28
- 1.0.18 — 2019-06-28
- 1.0.17 — 2019-06-27
- 1.0.16 — 2019-06-27
- 1.0.15 — 2019-06-27
- 1.0.14 — 2019-06-25
- 1.0.13 — 2019-06-10
- 1.0.12 — 2019-06-05
- 1.0.11 — 2019-06-04
- 1.0.10 — 2019-05-23
- 1.0.9 — 2019-05-23
- 1.0.8 — 2019-05-22
- 1.0.7 — 2019-05-20
- 1.0.6 — 2019-05-16
- 1.0.5 — 2019-05-13
- … 5 more at https://npm.io/package/editable-chart/versions

## README

# editable-chart

> A Vue.js project

## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build
```

For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
## Install
```shell
npm install editable-chart -S
```

## Quick Start
``` javascript main.js 
## 依赖element-ui 

import Vue from 'vue'
import ElementUI from 'element-ui';
import '../node_modules/element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

import EditableChart from 'editable-chart'
Vue.use(EditableChart)



**Vue Component**
```vue 
<template>
  <div id="app">
    <div style="width:100%;height:100px;background:#f0f0f0;"></div>
    <div style="position:absolute;top:100px;left:0;bottom:0;width:80px;background:#f0f0f0"></div>
    <div style="position:absolute;top:100px;left:80px;bottom:0;right:0">
      <EditableChart 
      :dataSource="data_source" 
      :handleAddDataFn='handle_add_data_fn' 
      :handleSubmitFn='handle_submit_fn' 
      :handleCancelFn='handle_cancel_fn' 
      ref="edit_chart" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      data_source: {
        id: "1",
        data: [//初始数据,没有数据时传[]
          ["", "指标一", "指标二", "指标三"],
          ["cc", '100', '20', '30'],
          ["Mercedes", '89', '11', '15'],
          ["Toyota", '12', '140', '12'],
          ["Volvo", '10', '13', '13'],
        ],
        config: {//配置信息
          title: '请输入视图标题',
          title_show: true,
          title_color: "#404349",
          title_font_size: 16,
          xAxis_name: "",
          xAxis_show: false,
          divider_show: false,//分割线是否显示
          divider_type: "solid",//分割线类型，solid,dashed
          yAxis_name: "",
          yAxis_show: false,
          yAxis_min: "dataMin",//y轴最小值,默认为"dataMin"自动计算最小值
          yAxis_max: "dataMax",//y轴最大值，默认为"dataMax"自动计算最大值
          data_type: "百分比",//y轴-数据类型，有百分比，数字两种类型，默认是数字
          color_type: "",//填充-配色类别，手动选择，默认为“”即可
          color: "",//填充-默认颜色
          predefineColors:["#ccc","#00ff00","#ff0000","#0000ff","#224455","#336688"],//填充颜色预制配色表
          ui_color: ['#ff8a43', '#5a8cff', '#ffb65e', '#ea532e', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'],//配色表
          graphics_type: 'line'//图表类型
        }
      }
    }

  },
  methods: {
    handle_add_data_fn() {//修改数据
      alert("handleAddDataFn")
      this.data_source.data = [
        ["", "2019", "2020", "2021"],
        ["Tesla", '100', '20', '30'],
        ["Mercedes", '89', '11', '15'],
        ["Toyota", '12', '140', '12'],
        ["Volvo", '10', '13', '13']
      ]
    },
    handle_submit_fn(d) {//保存数据
      if (d == "data") {//提交table数据信息
        //数据处理，去掉冗余的null项
        let newArr = [];
        this.$refs.edit_chart.settings.data.forEach((value, index) => {
          let res = value.filter(
            item => { return (item != null) });
          if (res.length) {
            newArr[index] = res
          }

        })

        var res = {
          data: {
            id: this.$refs.edit_chart.id,
            data: newArr
          },
          code: 0,
          msg: "ok"
        }
      }
      if (d == "config") {//提交配置信息
        let cur_config = this.$refs.edit_chart.form;
        cur_config.ui_color = this.$refs.edit_chart.ui_color;
        var res = {
          data: {
            id: this.$refs.edit_chart.id,
            config: cur_config
          },
          code: 0,
          msg: "ok"
        }
      }
      console.log(JSON.stringify(res))

      // //图表数据：settings.data
      // console.log(this.$refs.edit_chart.settings.data);
      // //显示配置：this.$refs.edit_chart.form；
      // console.log(this.$refs.edit_chart.form);
      // //数据项配色this.$refs.edit_chart.ui_color
      // console.log(this.$refs.edit_chart.ui_color);
    },
    handle_cancel_fn(d) {//取消
      if (d == "data") {//提交table数据信息
        alert("取消提交table数据信息")
      }
      if (d == "config") {//提交配置信息
        alert("取消提交配置信息")
      }

    }
  },
  components: {
  }
}
</script>
```
//可选参数
:handleChangeDataTypeFn="handle_change_dataType_fn"
handle_change_dataType_fn(){//修改数据类型的开放方法

}

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