echarts-锥型柱状图

代码:

<div class="leftCard" id="hiddenDanger" ref="hiddenDangerRef"></div>

<script>
mounted(){
    this.getCharts()
},
methods:{
 getCharts() { 
      let chartDom = document.getElementById('hiddenDanger');
      let myChart = this.$echarts.init(chartDom);
      this.option = {
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          triggerEvent: true,
          axisTick: {
            alignWithLabel: true,
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: '#D3EBFF',
              type: 'solid'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#D3EBFF',
              fontSize: '18'
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '单位:条',
          min: 0,
          interval: 100,
          nameTextStyle: {
            color: '#D3EBFF',
            fontSize: 18,
            nameLocation: 'start',
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#35618B'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#D3EBFF',
              fontSize: '18'
            }
          }
        },
        series: [
          {
            emphasis: {
              itemStyle: {
                opacity: 1
              }
            },
            data: [136, 260, 280, 165, 220, 260, 158, 165, 40, 130, 290, 210],
            type: 'pictorialBar',
            barCategoryGap: '-80%',/*多个并排柱子设置柱子之间的间距*/
            symbol:
              'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            itemStyle: {
              normal: {
                color: 'rgba(9, 136, 204, 0.3500)'
              }
            },
            z: 10,

          }
        ]
      }; 
      myChart.setOption(this.option);
    },
}



</script>

 

### 在 Vue3 中使用 ECharts 和 CSS 实现 3D 柱状图 #### 安装依赖库 为了在 Vue3 项目中集成 ECharts 并创建 3D 柱状图,首先需要安装 `echarts` 及其对应的 Vue 组件包。 ```bash npm install echarts vue-echarts --save ``` #### 创建组件并初始化图表 接下来,在 Vue 组件内引入必要的模块,并完成基础配置: ```javascript <template> <div ref="chartContainer" style="width: 600px;height:400px;"></div> </template> <script setup> import * as echarts from 'echarts'; import { onMounted, ref, watchEffect } from 'vue'; const chartContainer = ref(null); let myChart; onMounted(() => { initChart(); }); function initChart() { const chartDom = chartContainer.value; myChart = echarts.init(chartDom); setOption(); } function setOption() { if (myChart) { myChart.dispose(); //释放图表 myChart = null; let chartDom = document.getElementById('main'); myChart = echarts.init(chartDom); var option = { title: { text: '3D柱状图' }, tooltip: {}, xAxis3D: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis3D: { type: 'value' }, zAxis3D: { type: 'value' }, grid3D: { boxWidth: 200, boxDepth: 80, viewControl: { // projection: 'orthographic' } }, series: [{ type: 'bar3D', data: [ [0, 0, Math.random() * 150], [0, 1, Math.random() * 150], ... ].map(function (item) { return { value: item }; }), shading: 'lambert', label: { show: false }, emphasis: { label: { fontSize: 20, color: '#900' } } }] }; myChart.setOption(option); } } </script> <style scoped> /* 自定义样式 */ #main { width: 100%; height: 100vh; } </style> ``` 上述代码展示了如何通过 JavaScript 初始化 ECharts 图表以及设置基本选项来展示 3D 效果[^2]。注意这里还包含了销毁旧实例再重新渲染新实例的过程,这有助于解决页面刷新或数据更新时可能出现的问题。 对于更复杂的交互需求或是想要调整视觉效果,则可以参考官方文档中的 GL 属性说明进一步优化配置项[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值