Echarts报表中的legend属性不生效

1、问题概述?

期望效果,红框中的内容显示出来,但是配置好如下不生效:

  legend: {
    data: ['Forest', 'Steppe', 'Desert', 'Wetland']
  },

2、解决办法和原因

需要配置两处才可以。

第一处:

  legend: {
    data: ['Forest', 'Steppe', 'Desert', 'Wetland']
  },

第二处:

series属性中的name值需要与legend中的data名称相同,如果不同则不显示。

series: [
    {
      name: 'Forest',
      type: 'bar',
      barGap: 0,
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390]
    },
    {
      name: 'Steppe',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290]
    },
    {
      name: 'Desert',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190]
    },
    {
      name: 'Wetland',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [98, 77, 101, 99, 40]
    }
  ]

### 使用 Vue3 和 JavaScript 构建后台管理系统的指南 构建基于 Vue3 的后台管理系统涉及多个方面,包括但不限于前端框架的选择、状态管理工具的应用以及API交互方式的设计。下面将详细介绍如何利用 Vue3 及其生态系统来创建高效的后台管理系统。 #### 项目初始化与配置 为了快速搭建开发环境并提高效率,推荐采用现代打包工具如 Vite 来代替 Webpack 进行项目的初始化工作。Vite 是由 Vue 创始人尤雨溪所领导团队推出的新一代前端构建工具,在启动速度上有着显著优势[^1]。 ```bash npm create vite@latest my-vue-app --template vue cd my-vue-app npm install npm run dev ``` 此命令序列会帮助开发者迅速建立起一个基础的 Vue 应用程序结构,并准备好进入下一步的功能实现阶段。 #### 组件库集成 Element Plus 提供了一套完整的 UI 解决方案,非常适合用来设计美观且易于使用的界面元素。通过简单的安装过程即可将其引入到项目当中: ```bash npm i element-plus ``` 接着可以在 `main.js` 文件里全局注册 Element Plus 或者按需加载所需模块以减少最终包体积大小。 ```javascript import { createApp } from 'vue' import App from './App.vue' // 全局导入 import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; const app = createApp(App) app.use(ElementPlus) app.mount('#app') ``` #### 数据获取与处理 Axios 是一款流行的 HTTP 客户端库,能够方便地发起网络请求并与服务器交换数据。对于大多数场景而言,它已经足够满足日常需求了。可以通过如下方法完成依赖项添加操作: ```bash npm install axios ``` 之后便可在任意位置调用 Axios 发送 GET/POST 请求读取远程资源或提交表单信息给后端服务接口。 ```javascript import axios from "axios"; async function fetchData() { try { const response = await axios.get('/api/data'); console.log(response.data); } catch (error) { console.error(error); } } ``` #### 路由导航设置 Vue Router 支持定义多页面应用中的不同视图之间的切换逻辑。借助于声明式的路由映射语法,可以轻松组织复杂的 URL 结构和对应的组件展示关系。以下是基本配置示例: ```bash npm install vue-router@next ``` 编辑 `router/index.js` 文件内容如下所示: ```javascript import { createRouter, createWebHistory } from 'vue-router' import HomeView from '../views/HomeView.vue' const routes = [ { path: '/', name: 'home', component: HomeView, }, ] const router = createRouter({ history: createWebHistory(), routes, }) export default router; ``` 最后一步是在入口文件中挂载路由器实例以便在整个应用程序范围内生效。 ```javascript import { createApp } from 'vue' import App from './App.vue' import router from './router' createApp(App).use(router).mount('#app') ``` #### 图形图表绘制支持 ECharts 属于百度开源的数据可视化类库之一,提供了丰富的图形种类选择和支持自定义样式的能力。只需执行 npm 命令就能顺利接入该特性至现有工程之中: ```bash npm install echarts ``` 随后按照官方文档指导编写相应代码片段用于渲染统计报表或其他形式的信息呈现效果。 ```html <template> <div ref="chartRef" style="width: 600px;height:400px;"></div> </template> <script setup lang="ts"> import * as echarts from 'echarts/core'; import { BarChart } from 'echarts/charts'; import { TitleComponent, TooltipComponent, GridComponent } from 'echarts/components'; import { CanvasRenderer } from 'echarts/renderers'; echarts.use([TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]); onMounted(() => { var chartInstance = echarts.init(this.$refs.chartRef); let option; option = { title: { text: '某地区蒸发量和降水量' }, tooltip: { trigger: 'axis' }, legend: {}, xAxis: { data: ["1月", "2月", "3月", "4月"] }, yAxis: {}, series: [] }; option && chartInstance.setOption(option); }); </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

雾林小妖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值