smart-charts 图表设计器
安装方式
从 npm 获取
npm install echarts smart-charts --save --registry http://172.16.11.21:4873
如何使用
esm
引入包, 包含css和es模块
import { createApp } from 'vue'
import App from './App.vue'
import 'echarts'; // NOTE: 全局引入?
import SmartCharts from '@jianghao_gdufs/smart-charts' // TODO: 修改为内网 npm 名
import '@jianghao_gdufs/smart-charts/dist/style.css'
createApp(App).use(smartCharts).mount('#app')
由于以 esm 使用的echarts不再自动导入组件,需要手动引入使用到的图表组件。详见 echarts5 升级指南
<template>
<SmartCharts :localStorageInfo="localStorageInfo"/>
</template>
按需引入 echarts
// 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。
import { use, registerMap } from 'echarts/core';
// 注意,新的接口中默认不再包含 Canvas 渲染器,需要显示引入,如果需要使用 SVG 渲染模式则使用 SVGRenderer
// 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';
// 引入提示框,标题,直角坐标系,数据集,内置数据转换器组件,组件后缀都为 Component
import { DatasetComponent, TooltipComponent, GridComponent, LegendComponent, TitleComponent, GeoComponent, VisualMapComponent, TransformComponent } from 'echarts/components';
// 引入柱状图图表,图表后缀都为 Chart
import { BarChart, LineChart, ScatterChart, PieChart, FunnelChart, HeatmapChart, RadarChart, EffectScatterChart, MapChart } from 'echarts/charts';
// 标签自动布局,全局过渡动画等特性
import { UniversalTransition, LabelLayout } from 'echarts/features'
// 注册
use([
CanvasRenderer,
/* 图表类型 start */
BarChart, LineChart, ScatterChart, PieChart, FunnelChart, HeatmapChart, RadarChart, EffectScatterChart,
/* 图表类型 end */
DatasetComponent,
TooltipComponent,
GridComponent,
LegendComponent,
TitleComponent,
VisualMapComponent
]);
// 地图
use([
MapChart,
GeoComponent,
])
use([
TransformComponent,
UniversalTransition,
LabelLayout
])
umd
需要先依次引入前置依赖的库, vue
、axios
、lodash
、echarts
、vue-echarts
。
再引入图表设计器的css文件和js文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="./es/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app">
<smart-charts
:local-storage-info="config"
></smart-charts>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.39/dist/vue.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.2.3"></script>
<script src="./es/smart-charts.umd.js"></script>
<script src="./test-umd/mock2.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
config
};
}
})
.use(SmartCharts)
.mount('#app');
</script>
</body>
</html>
> 注意 在使用umd的方式时,请保持使用 `kabel-case`
引入组件
图表设计器以插件的形式注册全局组件 SmartCharts
以及其内部会使用到的组件。
一般通过入口组件 SmartCharts
的参数来控制图表的渲染。
由于其他的组件也是全局注册的,可以直接使用。