ECharts之3D立体柱状图一

最新推荐文章于 2024-05-22 08:52:46 发布

原创

最新推荐文章于 2024-05-22 08:52:46 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #es6 #vue.js

本文展示了如何在Vue3.0应用中安装和注册ECharts库，以及如何创建和配置图表，包括数据缩放、提示框组件、图例、坐标轴等，以实现动态和交互式的订单数据可视化。

效果图

在这里插入图片描述

背景图片

下载ECharts

npm install echarts --save

引入并注册全局ECharts

在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 )

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

在组件中使用ECharts

<template>
  <div class='wrapper'>
    <div class='chart' id='chart'></div>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  mounted () {
    this.drawChart()
  },
  methods: {
    drawChart () {
      // 基于准备好的dom，初始化echarts实例
      const chart = this.$echarts.init(document.getElementById('chart'))
      // 监听屏幕变化自动缩放图表
      window.addEventListener('resize', function () { chart.resize() })
      // 绘制图表
      chart.setOption({
        // 设置图表的位置
        grid: {
          x: 40, // 左间距
          y: 70, // 上间距
          x2: 50, // 右间距
          y2: 30, // 下间距
          containLabel: true // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景
        },
        // dataZoom 组件 用于区域缩放
        dataZoom: [
          {
            type: 'inside',
            xAxisIndex: [0], // 设置 dataZoom-inside 组件控制的 x轴
            // 数据窗口范围的起始和结束百分比  范围: 0 ~ 100
            start: 0,
            end: 100
          }
        ],
        // 图表主标题
        title: {
          text: '订单', // 主标题文本