<template>
<div>
<div :class="['chart-contianer']" ref="chartContainer" :style="{ height: height || '25vh' }"></div>
</div>
</template>
<script>
const echarts = require('echarts')
export default {
props: ['height', 'propsEchartData'],
data() {
return {
tableData: {},
chart: null
}
},
watch: {
option: {
handler(n) {
this.chart.setOption(n)
},
deep: true
},
},
mounted() {
this.chart = echarts.init(this.$refs.chartContainer)
this.draw(this.option)
this.mointer()
},
computed: {
option() {
return {
color:["#0AF2FE","#FE2D19","#FC9900","#616163"],
series: [
{
type: 'pie', // 饼图
clockWise:false,
radius:[
230,
235
],
hoverAnimation:false,
itemStyle:{
borderRadius:5,
normal:{
label:{
position: 'outside',
formatter: function(params){
if(params.name !== '') {
return '{value|'+params.name+'}';
}else {
return '';
}
},
align: 'left',
rich: {
name:{
fontSize: 14,
fontFamily: 'PingFang SC',
fontWeight: 500,
color: '#999999',
},
value: {
fontSize: 20,
fontFamily: 'D-DIN',
fontWeight: 400,
}
},
},
labelLine: {
width: 4,
show: true,
length: 30,
length2: 250,
color: '#0AF2FE'
},
}
},
tooltip: {
show: true
},
data: [
{
"value":186586,
"name":"采集设备",
"itemStyle":{
"normal":{
"borderWidth":5,
"borderRadius":20,
"shadowBlur":20,
"borderColor":"#0AF2FE",
"shadowColor":"#0AF2FE"
}
}
},
]
},
]
}
}
},
methods: {
draw(option) {
this.chart.setOption(option)
//添加点击事件，并传递给父组件
this.chart.on('click', (params) => { // 监听点击事件
console.log('点击echart图坐标轴', params)
this.$emit("chick-chart",params)
})
},
mointer(){
this.$on('upgrade', option => {
this.chart.setOption(option)
})
}
}
}
</script>
<style lang='scss' scoped>
</style>
<!--
* @Author: your name
* @Date: 2020-09-28 17:22:35
* @LastEditTime: 2021-08-26 11:22:53
* @LastEditors: XHY
* @Description: In User Settings Edit
* @FilePath: \hb-web\src\views\diagnosis\expend\collectionMethod\components\Methodes\EchartFunnel.vue
-->
<template>
<div>
<!-- <Chart :option="option" /> -->
<div :class="['chart-contianer']" ref="chartContainer" :style="{ height: height || '25vh' }"></div>
</div>
</template>
<script>
import mock from '@/api/mock'
const echarts = require('echarts')
export default {
props: ['height', 'propsEchartData'],
data() {
return {
tableData: {},
chart: null
}
},
watch: {
option: {
handler(n) {
this.chart.setOption(n)
},
deep: true
},
},
mounted() {
this.chart = echarts.init(this.$refs.chartContainer)
this.draw(this.option)
this.mointer()
},
computed: {
option() {
return {
color:["#0AF2FE","#FE2D19","#FC9900","#616163"],
series: [
// 一圈
{
type: 'pie', // 饼图
clockWise:false,
radius:[
105,
110
],
hoverAnimation:false,
itemStyle:{
borderRadius:5,
normal:{
label:{
position: 'outside',
formatter: function(params){
if(params.name !== '') {
return '{value|'+params.name+'}';
}else {
return '';
}
},
align: 'left',
rich: {
name:{
fontSize: 14,
fontFamily: 'PingFang SC',
fontWeight: 500,
color: '#999999',
},
value: {
fontSize: 20,
fontFamily: 'D-DIN',
fontWeight: 400,
}
},
},
labelLine: {
width: 4,
show: true,
length: 30,
length2: 250,
color: '#0AF2FE'
},
}
},
tooltip: {
show: true
},
data: [
{
"value":186586,
"name":"采集设备",
"itemStyle":{
"normal":{
"borderWidth":5,
"borderRadius":20,
"shadowBlur":20,
"borderColor":"#0AF2FE",
"shadowColor":"#0AF2FE"
}
}
},
]
},
// 二圈
{
type: 'pie', // 饼图
clockWise:false,
radius:[
170,
175
],
hoverAnimation:false,
itemStyle:{
borderRadius:5,
normal:{
label:{
position: 'outside',
formatter: function(params){
if(params.name !== '') {
return '{value|'+params.name+'}';
}else {
return '';
}
},
align: 'left',
rich: {
name:{
fontSize: 14,
fontFamily: 'PingFang SC',
fontWeight: 500,
color: '#999999',
},
value: {
fontSize: 20,
fontFamily: 'D-DIN',
fontWeight: 400,
}
},
},
labelLine: {
width: 4,
show: true,
length: 30,
length2: 250,
color: '#0AF2FE'
},
}
},
tooltip: {
show: true
},
data: [
{
"value":186586,
"name":"采集设备",
"itemStyle":{
"normal":{
"borderWidth":5,
"borderRadius":20,
"shadowBlur":20,
"borderColor":"#0AF2FE",
"shadowColor":"#0AF2FE"
}
}
},
]
},
// 三圈
{
type: 'pie', // 饼图
clockWise:false,
radius:[
230,
235
],
hoverAnimation:false,
itemStyle:{
borderRadius:5,
normal:{
label:{
position: 'outside',
formatter: function(params){
if(params.name !== '') {
return '{value|'+params.name+'}';
}else {
return '';
}
},
align: 'left',
rich: {
name:{
fontSize: 14,
fontFamily: 'PingFang SC',
fontWeight: 500,
color: '#999999',
},
value: {
fontSize: 20,
fontFamily: 'D-DIN',
fontWeight: 400,
}
},
},
labelLine: {
width: 4,
show: true,
length: 30,
length2: 250,
color: '#0AF2FE'
},
}
},
tooltip: {
show: true
},
data: [
{
"value":186586,
"name":"采集设备",
"itemStyle":{
"normal":{
"borderWidth":5,
"borderRadius":20,
"shadowBlur":20,
"borderColor":"#0AF2FE",
"shadowColor":"#0AF2FE"
}
}
},
]
},
]
}
}
},
methods: {
draw(option) {
this.chart.setOption(option)
//添加点击事件，并传递给父组件
this.chart.on('click', (params) => { // 监听点击事件
console.log('点击echart图坐标轴', params)
this.$emit("chick-chart",params)
})
},
mointer(){
this.$on('upgrade', option => {
this.chart.setOption(option)
})
}
}
}
</script>
<style lang='scss' scoped>
</style>
浙公网安备 33010602011771号