圆形饼图与环园饼图的区别js和echarts

最新推荐文章于 2025-06-05 21:40:57 发布

IKUNzhenin

最新推荐文章于 2025-06-05 21:40:57 发布

阅读量345

点赞数 9

分类专栏： js练手功能 js如何学习 js中的功能的特性文章标签： javascript echarts 前端

本文链接：https://blog.youkuaiyun.com/IKUNzhenin/article/details/136911137

版权

js中的功能的特性同时被 3 个专栏收录

63 篇文章

订阅专栏

js练手功能

59 篇文章

订阅专栏

js如何学习

17 篇文章

订阅专栏

本文介绍了如何使用ECharts库在网页上创建一个带有数据提示和自定义样式的饼图，通过JavaScript操作DOM元素和设置图表配置选项实现动态展示。

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

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  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: 10,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};

option && myChart.setOption(option);

			<div id="main" style="width: 500px;height:500px;"></div>

这段代码使用ECharts库来绘制一个饼图。首先，通过`getElementById`方法获取一个DOM元素，该元素的`id`为`main`，并将其赋值给变量`chartDom`。然后，使用`echarts.init`方法初始化一个ECharts实例，并将前面获取到的DOM元素传入，得到一个`myChart`变量，表示图表实例。

接下来，定义了一个`option`对象，该对象包含了图表的配置选项。其中，`tooltip`属性设置了当鼠标悬停在数据项上时显示的提示框。`legend`属性设置了图例的位置为居中。`series`属性定义了一个饼图系列，设置了饼图的半径范围、边框样式等。`data`属性设置了饼图的数据项，每个数据项包含了值和名称。

最后，通过`option && myChart.setOption(option)`将配置选项应用到图表实例上，使图表显示出来。

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  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
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 20,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};

option && myChart.setOption(option);

这段代码使用ECharts库来绘制一个饼图。首先，通过`getElementById`方法获取一个DOM元素，该元素的`id`为`main`，并将其赋值给变量`chartDom`。然后，使用`echarts.init`方法初始化一个ECharts实例，并将前面获取到的DOM元素传入，得到一个`myChart`变量，表示图表实例。

接下来，定义了一个`option`对象，该对象包含了图表的配置选项。其中，`tooltip`属性设置了当鼠标悬停在数据项上时显示的提示框。`legend`属性设置了图例的位置为居中。`series`属性定义了一个饼图系列，设置了饼图的半径范围、边框样式等。`data`属性设置了饼图的数据项，每个数据项包含了值和名称。

在这个修改后的代码中，`emphasis`属性的`label`属性设置了标签在鼠标悬停时显示，并设置了字体大小为20和字体粗细为粗体。

最后，通过`option && myChart.setOption(option)`将配置选项应用到图表实例上，使图表显示出来。