feat(chart): chart plugin

add chart plugin,chart demo sheet

src/expendPlugins/chart/chartmix.css

@@ -1 +1 @@
-.luckysheet-datavisual-quick-menu{width:90px;overflow:auto;margin-top:15px}.luckysheet-datavisual-quick-menu::-webkit-scrollbar{display:none}.luckysheet-datavisual-quick-menu>div{text-align:left;padding:4px 4px;border-right:3px solid #fff;color:#777;cursor:pointer;line-height:1.4em;word-wrap:break-word}.luckysheet-datavisual-quick-menu>div:hover{color:#000}.luckysheet-datavisual-quick-menu>div i{width:15px}.luckysheet-datavisual-quick-menu>div:hover i{color:#ff7e7e}.luckysheet-datavisual-quick-menu>div.luckysheet-datavisual-quick-menu-active{border-right:3px solid #ff7e7e;color:#000;font-weight:700}.luckysheet-datavisual-quick-menu>div.luckysheet-datavisual-quick-menu-active:hover i{color:#000}.luckysheet-datavisual-quick-range{padding:5px 0}.luckysheet-datavisual-range-container{background:#fff;border:1px solid #d9d9d9;border-top:1px solid silver;min-width:20px;width:100%;max-width:200px;display:inline-block}.luckysheet-datavisual-range-container-focus{border:1px solid #4d90fe;box-shadow:inset 0 1px 2px rgba(0,0,0,.3);outline:none}.luckysheet-datavisual-range-input,.luckysheet-datavisual-range-input:focus{background:transparent!important;border:none!important;box-sizing:border-box;box-shadow:none;height:25px;margin:0;outline:none!important;padding:1px 8px!important;width:100%}.luckysheet-datavisual-range-button-container{overflow:hidden;padding:0 0 0 8px;text-align:right;width:21px}.luckysheet-datavisual-range-button-container div{padding:2px 10px 0 10px;font-size:18px;cursor:pointer;color:#6598f3}.luckysheet-datavisual-range-button-container div:hover{color:#ff7e7e}.luckysheet-datavisual-quick-m{margin-top:5px;min-height:500px}.luckysheet-datavisual-quick-list{left:90px;right:0;bottom:0;top:80px;position:absolute;overflow:auto;border-top:1px solid #e5e5e5;padding:5px 3px 35px 3px}.luckysheet-datavisual-quick-list-title{padding:4px 6px;background:#e5e5e5;margin-top:10px}.luckysheet-datavisual-quick-list-ul{overflow:hidden}.luckysheet-datavisual-quick-list-item{display:inline-block;margin:5px 8px;border:1px solid #dadada;width:100px;height:80px}.luckysheet-datavisual-quick-list-item:hover{border:1px solid #ff7e7e;box-shadow:0 0 20px #ff7e7e}.luckysheet-datavisual-quick-list-item img{display:inline-block;width:100px;height:80px}.luckysheet-datavisual-quick-list-item-active{border:1px solid #6598f3;box-shadow:0 0 20px #6598f3}.chart-base-slider .el-slider__runway.show-input{margin-right:72px}.chart-base-slider .el-slider__input.el-input-number--mini{width:56px}.chart-base-slider .input_content{margin:6px 0 0 5px}.title{font-weight:700}.el-row{font-size:12px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.chartSetting{width:100%;height:100%}
+.luckysheet-datavisual-quick-menu{width:120px;overflow:auto;margin-top:15px}.luckysheet-datavisual-quick-menu::-webkit-scrollbar{display:none}.luckysheet-datavisual-quick-menu>div{text-align:left;padding:4px 4px;border-right:3px solid #fff;color:#777;cursor:pointer;line-height:1.4em;word-wrap:break-word}.luckysheet-datavisual-quick-menu>div:hover{color:#000}.luckysheet-datavisual-quick-menu>div i{width:15px}.luckysheet-datavisual-quick-menu>div:hover i{color:#ff7e7e}.luckysheet-datavisual-quick-menu>div.luckysheet-datavisual-quick-menu-active{border-right:3px solid #ff7e7e;color:#000;font-weight:700}.luckysheet-datavisual-quick-menu>div.luckysheet-datavisual-quick-menu-active:hover i{color:#000}.luckysheet-datavisual-quick-range{padding:5px 0}.luckysheet-datavisual-range-container{background:#fff;border:1px solid #d9d9d9;border-top:1px solid silver;min-width:20px;width:100%;max-width:200px;display:inline-block}.luckysheet-datavisual-range-container-focus{border:1px solid #4d90fe;box-shadow:inset 0 1px 2px rgba(0,0,0,.3);outline:none}.luckysheet-datavisual-range-input,.luckysheet-datavisual-range-input:focus{background:transparent!important;border:none!important;box-sizing:border-box;box-shadow:none;height:25px;margin:0;outline:none!important;padding:1px 8px!important;width:100%}.luckysheet-datavisual-range-button-container{overflow:hidden;padding:0 0 0 8px;text-align:right;width:21px}.luckysheet-datavisual-range-button-container div{padding:2px 10px 0 10px;font-size:18px;cursor:pointer;color:#6598f3}.luckysheet-datavisual-range-button-container div:hover{color:#ff7e7e}.luckysheet-datavisual-quick-m{margin-top:5px;min-height:500px;top:50px;font-size:12px}.luckysheet-datavisual-quick-list{left:110px;right:0;bottom:0;top:80px;position:absolute;overflow:auto;border-top:1px solid #e5e5e5;padding:5px 3px 35px 3px}.luckysheet-datavisual-quick-list-title{padding:4px 6px;background:#e5e5e5;margin-top:10px}.luckysheet-datavisual-quick-list-ul{overflow:hidden}.luckysheet-datavisual-quick-list-item{display:inline-block;margin:5px 8px;border:1px solid #dadada;width:100px;height:80px}.luckysheet-datavisual-quick-list-item:hover{border:1px solid #ff7e7e;box-shadow:0 0 20px #ff7e7e}.luckysheet-datavisual-quick-list-item img{display:inline-block;width:100px;height:80px}.luckysheet-datavisual-quick-list-item-active{border:1px solid #6598f3;box-shadow:0 0 20px #6598f3}.chart-base-slider .el-slider__runway.show-input{margin-right:72px}.chart-base-slider .el-slider__input.el-input-number--mini{width:56px}.chart-base-slider .input_content{margin:6px 0 0 5px}.title{font-weight:700}.el-row{font-size:12px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.chartSetting{width:100%;height:100%}

src/expendPlugins/chart/demo.html

@@ -1,10 +0,0 @@
-<meta charset="utf-8">
-<title>chartmix demo</title>
-<script src="./chartmix.umd.js"></script>
-
-<link rel="stylesheet" href="./chartmix.css">
-
-
-<script>
-console.log(chartmix)
-</script>

src/expendPlugins/chart/plugin.js

@@ -25,7 +25,7 @@ const dependScripts = [
     'https://unpkg.com/vuex@3.4.0',
     'https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js',
     'https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js',
-    'expendPlugins/chart/chartmix.umd.js'
+    'expendPlugins/chart/chartmix.umd.min.js'
     // 'http://26.26.26.1:8000/chartmix.umd.js'
 ]
 
@@ -86,10 +86,17 @@ function chart(data, isDemo) {
 
         // 初始化渲染图表
         for (let i = 0; i < data.length; i++) {
-            if (data[i].status == '1') {
+            // if (data[i].status == '1') {
                 renderCharts(data[i].chart, isDemo)
+            // }
+        }
+
+        for (let i = 0; i < data.length; i++) {
+            if (data[i].status == '1') {
+                renderChartShow(data[i].index)
             }
         }
+
     });
 }
 
@@ -259,6 +266,7 @@ function renderCharts(chartLists, isDemo) {
         container.style.top = top + 'px'
         container.style.zIndex = chartInfo.zIndex ? chartInfo.zIndex : 15
         chartInfo.zIndex++
+
     }
 }
 
@@ -1471,6 +1479,8 @@ function renderChartShow(index) {
                 chart.isShow = true;
                 $('#' + chart.chart_id + '_c').show();
 
+                chartInfo.resizeChart(chart.chart_id)
+
                 if (chart.needRangeShow == true) {
                     //一个sheet页只有一个图表高亮显示,//重要！因为在store了做了存储，所以能在此处找到对应图表设置显示隐藏
                     //操作DOM当前图表选择区域高亮

src/index.html

@@ -28,6 +28,7 @@
 		import sheetPivotTableData from './demoData/sheetPivotTableData.js'
 		import sheetPivotTable from './demoData/sheetPivotTable.js'
 		import sheetSparkline from './demoData/sheetSparkline.js'
+		import sheetChart from './demoData/sheetChart.js'
 		$(function () {
 
 			luckysheet.create({
@@ -35,7 +36,7 @@
 				lang: 'en',
 				allowEdit:true,
 				plugins: ['chart'],
-				data: [sheetCell,sheetFormula,sheetConditionFormat,sheetTable,sheetSparkline,sheetComment,sheetPivotTableData,sheetPivotTable]
+				data: [sheetCell,sheetFormula,sheetConditionFormat,sheetTable,sheetSparkline,sheetComment,sheetPivotTableData,sheetPivotTable,sheetChart]
 			})
 
 		})

src/methods/get.js

@@ -49,7 +49,19 @@ function getluckysheet_scroll_status() {
     return Store.luckysheet_scroll_status;
 }
 
-function getluckysheetfile() {
+function getluckysheetfile(plugin) {
+    // 获取图表数据
+    if(plugin){
+        Store.luckysheetfile.forEach(file => {
+            if(!!file.chart){
+                file.chart.forEach((chartObj)=>{
+                    const chartJson = Store.getChartJson(chartObj.chart_id);
+                    chartObj.chartOptions = chartJson;
+                })
+            }
+        });
+    }
+    
     return Store.luckysheetfile;
 }