editable-chart v1.0.19

editable-chart

A Vue.js project

Build Setup

# 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.

Install

npm install editable-chart -S

Quick Start

## 依赖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**
```js 
<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(){//修改数据类型的开放方法

}