@jianghao_gdufs/smart-charts NPM

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`