父组件
<div class="content-container">
<el-row>
<el-col :span="18">
<complexChart :mixture-data="MixtureData" />
</el-col>
<el-col :span="6">
<chartRef :pie-data="optionRight2" class="cgart" />
</el-col>
</el-row>
</div>
子组件
<template>
<div class="companyList-ctn"
:style="{ 'width': width }">
<div :id="id"
:style="{'width':'100%','height': screenHeight+'px'}"/>
</div>
</template>
<script>
// 创建echarts的初始化id
const _c = {id: 1}
// 导入echarts包,导入echarts包使用require,为何不使用import
const echarts = require('echarts')
export default {
props: {
pieData: {
type: Object
},
screenHeight: {
type: Number
}
},
data() {
return {
myPieChart: '', // 声明一个变量来接收echarts初始化的实例
width: '100%',
// height: 300 + 'px'
}
},
created() {
_c.id++
this.id = 'c_pie_' + _c.id// 动态创建饼图的id选择器,由于id的唯一性
},
mounted() {
// 初始化echarts
this.$nextTick(() => {
this.initChart()
})
// 监听浏览器窗口变化初始化echarts,也就是当浏览器可视区域改变,让图表自适应
window.addEventListener('resize', this.initChart, false)
},
// vue组件实例销毁之前移除监听事件,避免当我们切换路由时导致vue出现警告:
// echarts.js?1be7:2160 Uncaught Error: Initialize failed: invalid dom.
beforeDestroy() {
window.removeEventListener('resize', this.initChart)
},
methods: {
initChart() {
// 获取dom插入echarts图表
var chartDom = document.getElementById(this.id)
// 在每次初始化实例之前先清除上一次创建好的实例,以便数据是最新的,避免数据错乱
if (this.myPieChart != null && this.myPieChart != '' && this.myPieChart != undefined) {
this.myPieChart.dispose()// 销毁
}
// echarts初始化方法
this.myPieChart = echarts.init(chartDom)
const _this = this
// 监听页面变化图表自适应
this.myPieChart.resize()
// echarts配置项
var option = {
tooltip: { // 提示框浮层的位置,
trigger: 'item' // 默认不设置时位置会跟随鼠标的位置。
},
legend: { // 饼图图例配置项
// 类目位置
orient: 'horizontal', // 类目排列显示
// top: 'center', // 类目位置
bottom: '0px', // 类目位置
// right: 50 + '%', // 类目位置
icon: 'circle', // 类目形状,默认圆角矩形
itemWidth: 10, // 类目原型宽度
itemHeight: 10, // 类目原型高度
textStyle: {
lineHeight: 20,
fontSize: 14,
color: '#333333'
},
data: [
// 类目数据
'视频',
'图片'
]
},
// 饼图数据配置项
series: [
{
type: 'pie', // echarts类型指定,这个type决定当前的图表是饼图还是折线图亦或是柱状图
radius: '70%', // 饼图大小,传数组显示环形,
center: ['50%', '50%'], // 饼图位置,展示在父容器内的位置
selectedMode: 'single', // 选中模式,表示是否支持多个选中,默认关闭,支持布尔值和字符串,字符串取值可选,‘single’,‘multiple’,分别表示单选还是多选。
itemStyle: { // 饼图样式,由于饼图只有一项数据,所以只有一个itemStyle,稍后我们会介绍柱状图,会有多个itemStyle
color: function (params) { // 设置饼图颜色-渐变
var colorList = [ // 饼图颜色,渐变色
{c1: '#2DC4FF', c2: '#1492FF'},
{c1: '#53DEC4', c2: '#29BA91'}
]
// 设置饼图渐变色
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{
// 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
offset: 0,
color: colorList[params.dataIndex].c1
},
{
offset: 1,
color: colorList[params.dataIndex].c2
}
])
}
},
label: // 饼图图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等
this.pieData.series[0].itemStyle.normal.label,
data: [// 饼图数据
{
name: '视频',
value: this.pieData.series[0].data[0]
},
{name: '图片', value: this.pieData.series[0].data[1]}
],
emphasis: { // 高亮状态的扇区和标签样式。(鼠标移入时,饼图的样式配置项,可设置阴影样式,以及文字加粗颜色还有文字大小等等)
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
this.myPieChart.setOption(option)// setOption这个api是echarts内置的api
}
}
}
</script>
<style lang="scss" scoped>
.companyList-ctn {
border-radius: 4px;
margin-bottom: 10px;
background: white;
.companyList-oneItem {
display: flex;
justify-content: space-between;
align-items: center;
}
}
</style>
vue echarts饼状统计
于 2022-11-10 09:25:49 首次发布