vue3-echars-环形图

最新推荐文章于 2024-08-13 19:49:40 发布

一个大长腿

最新推荐文章于 2024-08-13 19:49:40 发布

阅读量465

点赞数

文章标签： java 前端 javascript

本文链接：https://blog.csdn.net/zybijiso666/article/details/134064351

版权

本文介绍了如何在Vue项目中通过npm安装ECharts库，并展示了一个示例，演示如何设置并初始化一个饼图，用于显示律师事务所的不同服务类别数据。

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

安装依赖

npm install echarts --save

引入

import * as echarts from 'echarts';

html

<template>
  <div class="echars-two" id="echarsTwo"></div>
</template>

script

 // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('echarsTwo'));
  // 绘制图表
  myChart.setOption({
    title: {
      text: '事务所数量',
      left: 'center',
      top: "20px"
    },
    tooltip: {

      trigger: 'item'
    },
    legend: {
      top: "20px",
      orient: 'vertical',
      left: '10%'
    },
    color: ['#FAC858', '#FF7070', '#9FE080'],
    backgroundColor: '#fff',
    series: [{
      // name: 'Access From',
      top: "20px",
      type: 'pie',
      radius: ['35%', '60%'],
      data: [{
        value: list.value.lawyer,
        name: '律师'
      },
      {
        value: list.value.accounting,
        name: '会计'
      },
      {
        value: list.value.bond,
        name: '证券'
      },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  });

style

.echars-two {
  width: 33%;
  height: 260px;
  background-color: #fff;
}