vue中实现echart图表
项目中涉及到柱状图 折线图 饼图 主要思路 页面级组件里引用三个图标子组件 在子组件中配置echart图标配置信息 在父组件中传入数据值
注意问题 ： 子组件id不能重复
父组件 主要代码
引入组件<el-row>
<el-col :span="24">
<div class="item-box">
<my-chart :chartData="chart0"></my-chart>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<div class="item-box">
<myCharta :chartData="chart1"></myCharta>
</div>
</el-col>
<el-col :span="8">
<div class="item-box">
<my-chartb :chartData="chart2"></my-chartb>
</div>
</el-col>
<el-col :span="8">
<div class="item-box">
<myChartc :chartData="chart3"></myChartc>
</div>
</el-col>
</el-row>
//导入组件
import MyChart from './dashboard/myChart'
import MyCharta from './dashboard/myCharta'
import MyChartb from './dashboard/myChartb'
import MyChartc from './dashboard/myChartc'
//注册组件
components: {
BarChart,
MyChart,
MyCharta,
MyChartb,
MyChartc
},
data() {
return {
chart0:{
preData: [ 100, 25, 83, 21, 52, 113, 50, 89, 61, 35, 53, 102],
nextData: [45, 45,78, 100, 119, 80, 67, 25, 45, 109, 90, 52]
},
chart1:[
{value:335, name:'工种1'},
{value:310, name:'工种2'},
{value:234, name:'工种3'},
{value:135, name:'工种4'},
{value:1548, name:'工种5'},
{value:1, name:'工种6'},
{value:2, name:'工种7'}
],
chart2:{
preData: [ 100, 25, 83, 21, 52],
nextData: [ 80, 67, 25, 45, 109]
},
chart3:[
{value:35, name:'企业在职人员'},
{value:10, name:'学生'},
{value:24, name:'农村劳动者'},
{value:85, name:'城镇再就业人员'},
{value:8, name:'其他'}
],
}
},
<style lang="scss" scoped>
.item-box {
background: #fff;
padding: 16px 16px 0;
margin-bottom: 32px;
// margin-right: 10px;
box-sizing: border-box;
}
折线图配置代码
<template>
<div id="myChart" :style="{width:width, height: height}">
<!-- mychart -->
</div>
</template>
<script>
import echarts from 'echarts'
import resize from './mixins/resize'
require('echarts/theme/macarons') // echarts theme
export default {
// mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '350px'
},
autoResize: {
type: Boolean,
default: true
},
chartData: {
type: Object,
required: true
}
},
data() {
return {
chart: null,
}
},
created() {},
mounted() {
this.$nextTick(res => {
this.initChart();
})
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById('myChart'), 'macarons')
this.setOptions(this.chartData)
},
setOptions(chartData) {
console.log("chartData",chartData)
this.chart.setOption({
title: {
text: '月度考试人员分析',
},
tooltip: {
show:true,
trigger: 'axis',
axisPointer:{
type: 'line',
lineStyle: {
color: '#48b',
width: 1,
type: 'solid'
},
crossStyle: {
color: '#1e90ff',
width: 1,
type: 'dashed'
},
shadowStyle: {
color: 'rgba(150,150,150,0.3)',
width: 'auto',
type: 'default'
}
}
},
legend: {
show:true,
backgroundColor:'rgba(150,150,150,0)',
data: ['2021年', '2022年']
},
toolbox: {
itemSize:12,
borderColor:"#ddd",
show: true,
feature: {
magicType: {
show: true,
type:['line', 'bar',]
},
restore: {
show: true
},
}
},
calculable: true,
grid: {
left: 40,
right: 16,
bottom: 30,
top: 70,
backgroundColor: 'rgba(255,0,0,1)',
},
xAxis: [{
type: 'category',
boundaryGap: false,
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisTick: false
}],
yAxis: [{
axisTick: {
show: false
}
}],
series: [{
name: '2021年',
type: 'line',
data: chartData.preData,
markPoint: {
// clickable:false,
itemStyle: {
fontSize: 12,
},
data: [{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
},
},
{
name: '2022年',
type: 'line',
data: chartData.nextData,
markPoint: {
data: [{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
},
}
]
})
}
}
}
</script>
<style>
</style>
饼图配置代码
<template>
<div>
<div id="myCharta" :style="{width:width, height: height}"></div>
</div>
</template>
<script>
import echarts from 'echarts'
import resize from './mixins/resize'
require('echarts/theme/macarons') // echarts theme
export default {
// mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '350px'
},
autoResize: {
type: Boolean,
default: true
},
chartData: {
type: Object,
required: true
}
},
data() {
return {
chart: null,
}
},
created() {},
mounted() {
this.$nextTick(res => {
this.initChart();
})
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById('myCharta'), 'macarons')
this.setOptions(this.chartData)
},
setOptions(chartData) {
console.log("chartData",chartData)
this.chart.setOption({
title: {
text: '职业工种人员占比',
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
show:true,
orient : 'vertical',
x : 'right',
itemHeight:10,
itemWidth:10,
textStyle:{
color:'#999',
fontSize:14
}
// backgroundColor:'rgba(150,150,150,0)',
// data: ['工种一', '工种二','工种三','工种四']
},
calculable: true,
grid: {
left: 40,
right: 16,
bottom: 30,
top: 70,
backgroundColor: 'rgba(255,0,0,1)',
},
series: [
{
name:'职业工种人员占比',
type:'pie',
// radius : '55%',
radius : ['0', '60%'],
center: ['50%', '55%'],
startAngle:90,
minAngle:2,
selectedOffset:100,
data:chartData
}
]
})
}
}
}
</script>
<style>
</style>
柱状图配置代码
<template>
<div id="myChartb" :style="{width:width, height: height}">
<!-- mychart -->
</div>
</template>
<script>
import echarts from 'echarts'
import resize from './mixins/resize'
require('echarts/theme/macarons') // echarts theme
export default {
// mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '350px'
},
autoResize: {
type: Boolean,
default: true
},
chartData: {
type: Object,
required: true
}
},
data() {
return {
chart: null,
}
},
created() {},
mounted() {
this.$nextTick(res => {
this.initChart();
})
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById('myChartb'), 'macarons')
this.setOptions(this.chartData)
},
setOptions(chartData) {
console.log("chartData",chartData)
this.chart.setOption({
title: {
text: '职业等级人员占比',
},
tooltip : {
trigger: 'axis'
},
legend: {
show:true,
backgroundColor:'rgba(150,150,150,0)',
data: ['2021年', '2022年']
},
calculable: true,
grid: {
left: 40,
right: 16,
bottom: 30,
top: 70,
backgroundColor: 'rgba(255,0,0,1)',
},
xAxis: [{
type: 'value',
boundaryGap: false,
axisTick: true
}],
yAxis: [{
type : 'category',
data: ['1', '2', '3', '4', '5'],
axisTick: {
show: true
}
}],
series: [{
name: '2021年',
type:'bar',
data: chartData.preData,
markPoint: {
// clickable:false,
itemStyle: {
fontSize: 12,
},
data: [{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
},
//图形样式，可设置图表内图形的默认样式和强调样式（悬浮时样式）：
itemStyle: {
normal: {
color:function(params) {
return '#5a5e9e'
}
},
emphasis: {
}
}
},
{
name: '2022年',
type: 'bar',
data: chartData.nextData,
markPoint: {
data: [{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
},
//图形样式，可设置图表内图形的默认样式和强调样式（悬浮时样式）：
itemStyle: {
normal: {
color:function(params) {
return '#ec89a5'
}
},
emphasis: {
}
}
}
]
})
}
}
}
</script>
<style>
</style>
