123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191 |
- <template>
- <div ref="dom" class="charts chart-pie"></div>
- </template>
- <script>
- import echarts from 'echarts'
- import tdTheme from './theme.json'
- import { on, off } from '@/libs/tools'
- echarts.registerTheme('tdTheme', tdTheme)
- export default {
- name: 'ChartPie',
- props: {
- subtext: String,
- // 图表标题
- text: {
- type: String,
- default: ''
- },
- // 数据值
- value: {
- type: Array,
- default: function () {
- return []
- }
- },
- // 查询时间
- searchData: {
- type: Array,
- default: function () {
- return []
- }
- },
- // 圆环中心标题
- title: {
- type: String,
- default: ''
- },
- // 圆环中心金额
- total: {
- type: [Number, String],
- default: 0
- },
- // 圆环各类型颜色
- color: {
- type: Array,
- default: function () {
- return []
- }
- },
- // x轴标签旋转角度
- xAxisRotate: {
- type: Number,
- default: 0
- }
- },
- watch: {
- total: {
- handler (nVal, oVal) {
- // console.log(nVal, 'total111111111')
- // 为防止当为0时不执行函数
- if (nVal !== '') {
- this.pageInit()
- }
- },
- deep: true,
- immediate: true // 代表如果在 wacth 里声明了 xAxisData 之后,就会立即先去执行里面的handler方法,如果为 false就跟我们以前的效果一样,不会在绑定的时候就执行
- }
- },
- data () {
- return {
- dom: null // echarts实例
- }
- },
- methods: {
- resize () {
- this.dom.resize()
- },
- pageInit () {
- this.$nextTick(() => {
- const legend = this.value.map(_ => _.name)
- const option = {
- color: this.color,
- title: [{
- text: '{name|' + this.title + '}\n{val|' + this.formatNumber(this.total) + '}',
- top: 'center',
- left: 'center',
- textStyle: {
- rich: {
- name: {
- fontSize: 14,
- fontWeight: 'normal',
- color: '#666666',
- padding: [10, 0]
- },
- val: {
- fontSize: 24,
- fontWeight: 'bold',
- color: '#333333'
- }
- }
- }
- }],
- tooltip: {
- trigger: 'item',
- formatter: '{b} : {c} ({d}%)'
- },
- legend: {
- orient: 'horizontal',
- left: 'center',
- bottom: 'bottom',
- padding: 5,
- data: legend
- },
- series: [
- {
- type: 'pie',
- radius: ['35%', '50%'],
- center: ['50%', '50%'],
- avoidLabelOverlap: true, // 在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠
- hoverAnimation: false,
- label: {
- normal: {
- formatter: params => {
- return (
- '{icon|●}{name|' + params.name + '}{value|' +
- this.formatNumber(params.value) + '}'
- )
- },
- padding: [0, -100, 25, -130],
- rich: {
- icon: {
- fontSize: 12
- },
- name: {
- fontSize: 14,
- padding: [0, 10, 0, 4],
- color: '#666666'
- },
- value: {
- fontSize: 16,
- fontWeight: 'bold',
- color: '#333333'
- }
- }
- }
- },
- labelLine: {
- normal: {
- length: 20,
- length2: 120,
- lineStyle: {
- color: '#e6e6e6'
- }
- }
- },
- data: this.value,
- itemStyle: {
- emphasis: {
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: 'rgba(255, 170, 0, 0.5)'
- },
- normal: {
- borderColor: '#fff',
- borderWidth: 2
- }
- }
- }
- ]
- }
- this.dom = echarts.init(this.$refs.dom, 'tdTheme')
- console.log(option, 'option')
- this.dom.setOption(option)
- this.dom.resize()
- on(window, 'resize', this.resize)
- })
- },
- // 格式化金额
- formatNumber (num) {
- const reg = /(?=(\B)(\d{3})+$)/g
- return num.toString().replace(reg, ',')
- }
- },
- mounted () {
- this.pageInit()
- },
- beforeDestroy () {
- off(window, 'resize', this.resize)
- }
- }
- </script>
|