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为容器idplugins: ['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)

在luckysheet中输入图表所需的测试数据，点击图中2图标生成ECharts
在这里插入图片描述
生成效果

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

$(function () {//配置项var options = {container: 'luckysheet', //luckysheet为容器idplugins: ['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())
}