Vue使用Echarts的Demo_vue echarts demo-优快云博客

本文链接：https://blog.youkuaiyun.com/maoxiaohei_/article/details/125205377

本文介绍了如何使用ECharts库在Vue应用中创建一个显示网站访问来源的饼图，通过详细的数据和选项配置展示了如何呈现假想的搜索引擎、直接访问、邮件营销等数据。同时，还附带了响应式调整和窗口缩放的解决方案。

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

<template>
  <div>
    <div id="chart_example"></div>
  </div>
</template>


<script>
import echarts from 'echarts'

export default {
  data() {
    return {}
  },
  mounted() {
    let this_ = this
    let myChart = echarts.init(document.getElementById('chart_example'))
    let option = {
      title: {
        text: 'Referer of a Website',
        subtext: 'Fake Data',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    myChart.setOption(option)

    //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
    window.addEventListener('resize', function() {
      myChart.resize()
    })
  },
  methods: {},
  watch: {},
  created() {
  }
}
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h2 {
  text-align: center;
  padding: 30px;
  font-size: 18px;
}

#chart_example {
  width: 50%;
  height: 200px;
  border: 1px solid red;
  margin: 0 auto;
}
</style>