echarts初始化时,必须给其绑定的元素设置宽高,否则echarts会初始化失败。 举例 <template></template>import*as echarts from'echarts'; import { onMounted, ref } from'vue'; const barChart=ref<HTMLElement>(); const myChart1=ref<any>();//绘制柱形图functioninitBarEcharts() { myChart1.value=e...
2. 全局注册 echarts 修改main.ts // 引入 echarts import*asechartsfrom'echarts' importthemeJSONfrom'@/assets/weizwz.json' echarts.registerTheme('weizwz', themeJSON) constapp =createApp(App) // 全局挂载 echarts app.config.globalProperties.$echarts= echarts 3. 封装 echarts src/components下...
echarts 组件化后,使用前需要初始化,加载需要的功能组件,这样就只引入项目使用的组件,不会整体加载,减少了构建包的体积。 一般在项目中可以单独用一个文件来初始化加载本项目要用到的 echarts 组件、图表, 因为vue 有插件机制,可以把初始化放到一个插件中: // echarts-init.ts import { use } from "echarts...
创建一个Vue3组件来封装ECharts图表: 创建一个新的Vue组件文件,例如EchartsComponent.vue,并在其中配置ECharts图表。 vue <template> <div ref="chartRef" style="width: 600px; height: 400px;"></div> </template> <script lang="ts" setup> import { onMounted...
创建types.ts类型 import*asechartsfrom"echarts/core"import{BarChart,LineChart,LinesChart,PieChart,ScatterChart,RadarChart,GaugeChart}from"echarts/charts"import{TitleComponent,TooltipComponent,GridComponent,DatasetComponent,TransformComponent,LegendComponent,PolarComponent,GeoComponent,ToolboxComponent,DataZoomCompon...
对比基础版本的echarts封装组件,2.0版本做了如下优化 只需传入渲染数据及展示数据类型,即可渲染 其余图表配置可以按需传入 (不足之处:当前只做了折线图及柱形图的支持,其他类型图表各位可以按需扩展) Remark: 如果有帮助到各位或者给各位封装组件提供了一点思路,不妨点个赞吧。。。
Vue.prototype.$ecahrt = echarts /* vue3 */ app.config.globalProperties.$echarts = echarts 1. 2. 3. 4. 5. 6. 7. 也可以直接在绘制页面内按需引用。 引入需要绘制的地图数据 json 或 js 文件,本文使用的是 json 格式: import chinaJSON from '../../assets/json/china.json' ...
3. 创建 ECharts 组件 在src/components目录中创建一个名为MyChart.vue的文件。 <template> </template> import { defineComponent, ref, onMounted } from 'vue'; import * as echarts from 'echarts'; export default defineComponent({ name: 'MyChart', props...
效果如下图:echarts@5.4.3在线预览 ①安装插件 pnpmiecharts ②创建仪表盘组件GaugeChart.vue import { ref, onMounted, watch, computed } from'vue'/* 按需引入 *///使用 ECharts 提供的按需引入的接口来打包必须的组件//引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口 import * as e...