vue 使用 echarts 图表_vue drawline()-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaochouniu1/article/details/113241942

本文介绍如何使用ECharts进行图表配置，包括解决导入错误的方法、图表样式调整技巧及如何设置饼图显示省份统计数据等。通过具体示例展示了如何在Vue项目中引入并使用ECharts。

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

1.导入 npm install echarts -S
2. main.js

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

<template>
  <div>
	<div id="myChart" :style="{ width: '300px', height: '300px' }"></div>
  </div>
</template>
<script>
	export default {
	mounted(){
            this.drawLine();
        },
  	  methods: {
		drawLine() {
      		const myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '用户区域统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            name: '省份',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: this.tubiaoshuju,//数据
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }, // 到这里
   }
  }

bug
在这里插入图片描述
导入Echarts时用：import echarts from ‘echarts’ 会出现 “Cannot read property ‘init’ of undefined” 报错，改成 import * as echarts from ‘echarts’ 就可以

常见问题

修改颜色

标注颜色

		legend: {

            textStyle:{
              fontSize: 18,//字体大小
                color: '#ffffff'//字体颜色
            },
            right: 0,
            y:'30px',
        },