获取echarts title

可以通过echarts实例的getOption()方法获取echarts的配置项，从而获取title的相关信息。具体实现方法如下所示：

// 获取echarts实例
var myChart = echarts.init(document.getElementById('myChart'));

// 获取title文本
var titleText = myChart.getOption().title[0].text;
console.log(titleText);

其中，myChart.getOption()方法可以获取echarts的配置项，而title.text则表示获取第一个title的文本内容。如果有多个title，可以通过修改下标来获取相应的文本内容。

相关问题

echarts 鼠标移入title 隐藏

如果你想在鼠标移入 `title` 时隐藏 `title`，可以使用 `tooltip` 的 `formatter` 函数来实现。具体步骤如下：

1. 在 `tooltip` 配置项中设置 `trigger: 'axis'`，表示触发方式为坐标轴触发。
2. 在 `tooltip` 配置项中设置 `formatter` 函数，用于自定义提示框内容。
3. 在 `formatter` 函数中，判断当前鼠标悬浮的数据项是否有 `title` 属性。如果有，就将其隐藏。

下面是示例代码：

option = {
  tooltip: {
    trigger: 'axis',
    formatter: function(params) {
      var title = params[0].data.title;
      if (title) {
        // 鼠标移入有 title 属性的数据项时，隐藏 title
        return params[0].name + ': ' + params[0].value;
      } else {
        return params[0].name + ': ' + params[0].value + '<br>' + params[1].name + ': ' + params[1].value;
      }
    }
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [820, 932, {value: 901, title: '隐藏的 title'}, 934, 1290, 1330, 1320],
    type: 'line'
  }]
};

在这个示例中，我们在第三个数据项中添加了一个 `title` 属性，用于测试隐藏 `title` 的效果。在 `formatter` 函数中，我们首先获取当前悬浮的数据项的 `title` 属性，如果存在，则直接返回该数据项的数值。如果不存在，则返回两个数据项的数值和名称。

vueecharts获取后端数据

要在 Vue 中使用 ECharts，需要先安装 ECharts 和 vue-echarts。

1. 安装 ECharts 和 vue-echarts

npm install echarts --save-dev
npm install vue-echarts --save-dev

2. 引入 ECharts 和 vue-echarts

在 main.js 中引入 ECharts 和 vue-echarts：

import Vue from 'vue'
import ECharts from 'echarts'
import EChartsVue from 'vue-echarts'

Vue.component('v-chart', EChartsVue.component)
Vue.prototype.$echarts = ECharts

3. 在 Vue 组件中使用 vue-echarts

在组件模板中引入 vue-echarts，并传入数据和配置：

<template>
  <div>
    <v-chart :options="chartOptions"></v-chart>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartOptions: {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20, 15]
        }]
      }
    }
  }
}
</script>

4. 获取后端数据

使用 Vue 的生命周期钩子函数 mounted，在组件挂载后获取后端数据，然后将数据传给 ECharts 进行渲染：

<template>
  <div>
    <v-chart ref="myChart" :options="chartOptions"></v-chart>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      chartOptions: {
        title: {
          text: 'ECharts 示例'
        },
        tooltip: {},
        xAxis: {
          data: []
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: []
        }]
      }
    }
  },
  mounted() {
    axios.get('/api/data').then(response => {
      const data = response.data
      const xAxisData = []
      const seriesData = []
      data.forEach(item => {
        xAxisData.push(item.name)
        seriesData.push(item.value)
      })
      this.chartOptions.xAxis.data = xAxisData
      this.chartOptions.series[0].data = seriesData
      this.$refs.myChart.setOption(this.chartOptions)
    })
  }
}
</script>

以上代码中，使用 axios 发送 GET 请求获取后端数据，然后将数据处理成 ECharts 需要的格式，最后在组件挂载完成后调用 setOption 方法渲染图表。