light-chart

light-chart 是一个基于 F2 框架封装，专注于移动端，开箱即用的可视化解决方案，支持 H5 同时兼容 jsn 环境。完备的图形语法理论，满足各种可视化需求。

安装

当工程需要使用 light-chart 图表库时，首先需要对 lib 目录下的 package.json 文件进行设置，引入依赖：

{
  "dependencies": {
    "light-chart": "*"
  }
}

然后在 lib 目录下执行 npm install 完成安装。

npm install

使用

• 引入并注册组件：

import LightChart from 'light-chart';
export default {
    components:{
        ltCanvas:require("light-chart/canvas")
    },
}

• 使用组件：

<lt-canvas ref="canvas" :width="750" :height="500"></lt-canvas>

• 绘制图表：

export default {
    mounted(){
        // 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
        const data = [
            { year: '1951 年', sales: 38 },
            { year: '1952 年', sales: 52 },
            { year: '1956 年', sales: 61 },
            { year: '1957 年', sales: 14 },
            { year: '1958 年', sales: 48 },
            { year: '1959 年', sales: 68 },
            { year: '1960 年', sales: 28 },
            { year: '1962 年', sales: 33 },
        ];

        // Step 1: 创建 Chart 对象
        let chart = new LightChart.Chart({
            ltCanvas:this.$refs.canvas
        });

        // Step 2: 载入数据源
        chart.source(data);

        // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
        chart.interval().position('year*sales');

        // Step 4: 渲染图表
        chart.render();
    }
}

文档

了解更多 light-chart 的信息，请点击这里。

更新记录

v1.0.3

• #146417 修复发布时的报错

v1.0.2

• #141865 新增<web-canvas>组件