echarts实现饼图
时间: 2023-07-28 19:09:25 浏览: 44
Echarts饼图的formatter是用于格式化饼图数据标签的函数,可以通过设置formatter属性来自定义饼图数据标签的显示格式。该函数可以接收两个参数,第一个参数为当前数据项的名称,第二个参数为当前数据项的值。开发者可以根据自己的需求,使用JavaScript代码来格式化数据标签的显示内容,例如添加单位、保留小数位等。
相关问题
vue3+echarts实现饼图
以下是使用 Vue3 和 Echarts 实现饼图的示例代码:
1. 安装 Echarts:`npm install echarts`
2. 引入 Echarts:
```javascript
import echarts from "echarts";
import "echarts/lib/chart/pie";
import "echarts/lib/component/title";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/legend";
```
3. 在 Vue3 组件中使用 Echarts:
```vue
<template>
<div ref="chart" style="height: 400px;"></div>
</template>
<script>
import echarts from "echarts";
import "echarts/lib/chart/pie";
import "echarts/lib/component/title";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/legend";
export default {
mounted() {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(this.$refs.chart);
// 指定图表的配置项和数据
var option = {
title: {
text: "饼图示例",
left: "center",
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)",
},
legend: {
orient: "vertical",
left: "left",
data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
},
series: [
{
name: "访问来源",
type: "pie",
radius: ["50%", "70%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: true,
fontSize: "30",
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: [
{ value: 335, name: "直接访问" },
{ value: 310, name: "邮件营销" },
{ value: 234, name: "联盟广告" },
{ value: 135, name: "视频广告" },
{ value: 1548, name: "搜索引擎" },
],
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
};
</script>
```
在上面的示例代码中,我们在 `mounted` 钩子函数中初始化了一个 Echarts 实例,并使用 `setOption` 方法将图表的配置项和数据传递给 Echarts 实例,从而显示出饼图。
其中,`ref` 属性指定了图表所在的 DOM 元素,`title` 属性设置了图表标题,`legend` 属性设置了图例,`series` 属性设置了饼图的数据和样式。
如果需要修改饼图的样式或数据,只需要更改 `option` 对象的属性即可。
echarts 饼图移动端_react+echarts实现饼图
首先,你需要在 React 项目中安装 echarts:
```
npm install echarts --save
```
然后,在需要使用饼图的组件中引入 echarts,并在组件的生命周期函数 `componentDidMount` 中初始化 echarts 实例,并使用数据渲染饼图。
例如,以下是一个简单的饼图组件的代码:
```
import React, { Component } from 'react';
import echarts from 'echarts';
class PieChart extends Component {
componentDidMount() {
this.initChart();
}
initChart = () => {
const { data } = this.props;
const chart = echarts.init(this.chartRef);
chart.setOption({
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)',
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data,
},
],
});
};
render() {
return (
<div
ref={(ref) => {
this.chartRef = ref;
}}
style={{ width: '100%', height: '300px' }}
/>
);
}
}
export default PieChart;
```
在上面的代码中,我们使用 `componentDidMount` 函数初始化 echarts 实例,并使用传递进来的数据渲染饼图。注意,我们在组件的 `render` 函数中返回一个 `div` 元素,这个元素的 `ref` 属性绑定了一个回调函数,用来获取这个元素的引用,以便后续使用 echarts 来渲染图表。
在父组件中,我们可以使用以下代码来渲染这个饼图组件:
```
import React, { Component } from 'react';
import PieChart from './PieChart';
class App extends Component {
state = {
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' },
],
};
render() {
const { data } = this.state;
return (
<div>
<PieChart data={data} />
</div>
);
}
}
export default App;
```
在父组件中,我们传递一个 `data` 属性给饼图组件,这个属性包含了用于渲染饼图的数据。最终,我们可以在页面中看到一个简单的饼图。