vue中使用echarts

最新推荐文章于 2025-06-07 02:58:11 发布

点点关注不迷路

最新推荐文章于 2025-06-07 02:58:11 发布

阅读量128

点赞数

分类专栏： vue 文章标签： echarts vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_51526447/article/details/129774002

版权

vue 专栏收录该内容

14 篇文章

订阅专栏

文章介绍了如何在Vue项目中安装和使用ECharts库。首先通过npm安装ECharts，然后在组件中导入并初始化ECharts实例。接着，在mounted钩子中创建ECharts图表，并定义option对象来配置样式和数据。示例展示了line图和pie图的配置方法，最后通过setOption方法渲染图表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装 ECharts 库

npm install echarts

安装完成后，在需要使用 ECharts 的组件中引入 ECharts 库：

import echarts from 'echarts';

然后，在组件的 mounted() 钩子函数中，创建一个 ECharts 实例，并将其挂载到指定的 DOM 元素上：

mounted() {
  var chartDom = this.$el.querySelector('#chart');
  var myChart = echarts.init(chartDom);
  // ...
}

接下来，我们可以定义一个 option 对象，用于配置图表的样式和数据，例如：

var option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line'
  }]
};

最后，我们使用 setOption() 方法将配置好的 option 对象传递给 ECharts 实例，以渲染图表：

myChart.setOption(option);

完整的示例代码如下：

<template>
       <div id="echart1" style="margin: auto;width: 400px;height: 400px;"></div>
</template>

<script>
import echarts from 'echarts';
import {getEchartone, getEcharttwo, getEchartthree} from "@/api/Echarts";

export default {
name: "homepage",
  data() {
    return {
      one1: [],
    };
  },
  mounted() {
 getEchartone().then(res => {
      let result = res.map(item => ({value: item.news_count, name: item.newclass}));
      this.one1 = result
      var chartDom = this.$el.querySelector('#echart1');
      var myChart1 = echarts.init(chartDom);
      var option1 = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data:this.one1
          }
        ]
      };
      myChart1.setOption(option1);
    })
  }
};
</script>