Luckysheet 图表(chartmix)

快速搭建luckysheet

第一步

这里用文档给的CDN方式引入

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>

第二步

指定一个表格容器

<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>

第三步

创建一个表格

<script>
    $(function () {
        //配置项
        var options = {
            container: 'luckysheet' //luckysheet为容器id
        }
        luckysheet.create(options)
    })
</script>

至此，准备工作已经完成，现在用浏览器打开应该可以看到luckysheet页面了

引入插件ECharts

目前支持ECharts，图表使用了一个中间插件ChartMix (MIT协议）

<script>
    $(function () {
        //配置项
        var options = {
            container: 'luckysheet', //luckysheet为容器id
            plugins: ['chart']
        }
        luckysheet.create(options)
    })
</script>

启用插件后，应该会报下面的错误信息

Refused to apply style from 'http://127.0.0.1:5500/expendPlugins/chart/chartmix.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
util.js:642 GET http://127.0.0.1:5500/expendPlugins/chart/chartmix.umd.min.js net::ERR_ABORTED 404 (Not Found)

现在需要下载插件chartMix，将lib文件夹拷贝到项目中
|–index.html
|–expendPlugins/chart/
|----css/
|----chartmix.common1.js
|----chartmix.common1.js.map
|---- …

在luckysheet中输入图表所需的测试数据，点击图中2图标生成ECharts

生成效果

这里你已经成功一半，接下来完善一下代码，这里我们用localStorage模拟后端交互

$(function () {
    //配置项
    var options = {
        container: 'luckysheet', //luckysheet为容器id
        plugins: ['chart']
    }
    //这里初始化加载时从localStorage里取存储的数据
    options.data = JSON.parse(localStorage.getItem('luckysheet'))
    luckysheet.create(options)
})
//自己编写的函数，存储前将配置合并到luckysheet中到chart对象里
function getLuckysheetConfig() {
    let ls = luckysheet.getLuckysheetfile()
    ls.forEach((item, index) => {
        if(item.chart) {
            item.chart.forEach((chart, i) => {
                ls[index].chart[i] = {
                    ...ls[index].chart[i],
                    chartOptions: {...chartmix.default.getChartJson(chart.chart_id)}
                }
                let div = document.getElementById(chart.chart_id + '_c');
                if(div.style) {
                    ls[index].chart[i].left = parseInt(div.style.left)
                    ls[index].chart[i].top = parseInt(div.style.top)
                    ls[index].chart[i].width = parseInt(div.style.width)
                    ls[index].chart[i].height = parseInt(div.style.height)
                }
            })
        }
    })
    return JSON.stringify(ls)
}
//浏览器控制台直接调用save()函数即可保存配置
function save() {
    localStorage.setItem('luckysheet', getLuckysheetConfig())
}

生成图表后，直接浏览器调用全局save()函数，将luckysheet配置保存到localStorage，再次刷新页面后从localStorage里读取配置。
更多其他配置，请移步Luckysheet文档