[Vue3 + echarts] 实现动态表图

本文介绍了在Vue3中如何在组件挂载后使用echarts初始化图表,通过reactive处理options并实现数据变化监听。关键步骤包括设置options为响应式,以及在mounted钩子中初始化图表并监听option变化。

echarts 中 init 步骤需要获取 dom 元素,但 vue3 中 setup 在 beforeCreate 和 created 之间执行,此时还没有 dom 元素。因此选择在 mounted 钩子中进行初始化

将配置项 options 设置成 reactive,并用 watch 侦听其数据变化

let options = reactive({
    ...
});

let myChart;
onMounted(() => {
  myChart = echarts.init(document.getElementById("step-chart"));
  myChart.setOption(options);
});
watch(options, (newVal) => myChart.setOption(newVal));
Vue3 项目中使用 ECharts 实现 3D 环形,主要涉及以下步骤: ### 1. 安装与引入 ECharts 首先需要安装 ECharts 及其相关依赖。可以通过以下命令安装 ECharts: ```bash npm install echarts --save ``` 然后在 Vue3 项目的组件中引入 ECharts,并注册一个用于渲染的 DOM 容器。 ```vue <template> <div class="w-full h-[330px]" ref="pieChart"></div> </template> <script setup> import * as echarts from &#39;echarts&#39;; import { ref, onMounted } from &#39;vue&#39;; const pieChart = ref(null); onMounted(() => { const chart = echarts.init(pieChart.value); chart.setOption({ tooltip: {}, graphic: { elements: [{ type: &#39;text&#39;, position: [ &#39;50%&#39;, &#39;50%&#39; ], style: { text: &#39;3D 环形&#39;, fontSize: 20, textAlign: &#39;center&#39; } }] }, series: [{ type: &#39;pie&#39;, radius: [&#39;40%&#39;, &#39;70%&#39;], avoidLabelOverlap: false, label: { show: false }, data: [ { value: 335, name: &#39;A&#39;, itemStyle: { color: &#39;#5470C6&#39; } }, { value: 310, name: &#39;B&#39;, itemStyle: { color: &#39;#91CC75&#39; } }, { value: 274, name: &#39;C&#39;, itemStyle: { color: &#39;#FAC858&#39; } }, { value: 235, name: &#39;D&#39;, itemStyle: { color: &#39;#EE6666&#39; } } ] }] }); }); </script> ``` ### 2. 实现 3D 效果 ECharts 本身并不直接支持 3D 形,但可以通过插件 `echarts-gl` 实现 3D 效果。以下是实现 3D 环形的步骤: #### 安装 echarts-gl 插件 ```bash npm install echarts-gl --save ``` #### 引入并配置 3D 环形 ```vue <template> <div class="w-full h-[400px]" ref="pie3DChart"></div> </template> <script setup> import * as echarts from &#39;echarts&#39;; import &#39;echarts-gl&#39;; import { ref, onMounted } from &#39;vue&#39;; const pie3DChart = ref(null); onMounted(() => { const chart = echarts.init(pie3DChart.value); chart.setOption({ tooltip: {}, xAxis3D: {}, yAxis3D: {}, zAxis3D: {}, grid3D: { viewControl: { autoRotate: true } }, series: [{ type: &#39;pie&#39;, radius: [&#39;40%&#39;, &#39;70%&#39;], height: 30, itemStyle: { borderRadius: 5 }, data: [ { value: 335, name: &#39;A&#39;, itemStyle: { color: &#39;#5470C6&#39; } }, { value: 310, name: &#39;B&#39;, itemStyle: { color: &#39;#91CC75&#39; } }, { value: 274, name: &#39;C&#39;, itemStyle: { color: &#39;#FAC858&#39; } }, { value: 235, name: &#39;D&#39;, itemStyle: { color: &#39;#EE6666&#39; } } ], shading: &#39;color&#39; }] }); }); </script> ``` ### 3. 自定义样式和交互 为了增强用户体验,可以对 3D 环形进行自定义,包括调整颜色、添加标签、设置交互行为等。 #### 示例:添加标签和交互效果 ```javascript chart.setOption({ tooltip: { trigger: &#39;item&#39; }, legend: { data: [&#39;A&#39;, &#39;B&#39;, &#39;C&#39;, &#39;D&#39;] }, series: [{ type: &#39;pie&#39;, radius: [&#39;40%&#39;, &#39;70%&#39;], height: 30, itemStyle: { borderRadius: 5 }, label: { show: true, formatter: &#39;{b}: {c}&#39; }, data: [ { value: 335, name: &#39;A&#39;, itemStyle: { color: &#39;#5470C6&#39; } }, { value: 310, name: &#39;B&#39;, itemStyle: { color: &#39;#91CC75&#39; } }, { value: 274, name: &#39;C&#39;, itemStyle: { color: &#39;#FAC858&#39; } }, { value: 235, name: &#39;D&#39;, itemStyle: { color: &#39;#EE6666&#39; } } ], shading: &#39;color&#39; }] }); ``` ### 4. 多层极坐标环形 如果需要实现多层极坐标环形,可以参考以下代码: ```javascript chart.setOption({ polar: { radius: [0, &#39;100%&#39;] }, angleAxis: { type: &#39;category&#39;, data: [&#39;A&#39;, &#39;B&#39;, &#39;C&#39;, &#39;D&#39;], z: 10 }, radiusAxis: { type: &#39;category&#39;, data: [&#39;Layer 1&#39;, &#39;Layer 2&#39;, &#39;Layer 3&#39;], z: 10 }, series: list.map((item, index) => ({ type: &#39;bar&#39;, data: [item.percent], coordinateSystem: &#39;polar&#39;, roundCap: true, barWidth: 10, z: index, itemStyle: { color: item.color }, startAngle: index === 0 ? 0 : list[index - 1].percent, endAngle: item.percent })) }); ``` 通过上述步骤,可以在 Vue3 项目中实现一个功能丰富的 3D 环形,并支持多层极坐标环形的渲染。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值