123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899 |
- <template>
- <!-- 饼图 -->
- <div style="width:100%;height:100%;textAlign:center;margin:-15px 0;" :id="id">
- </div>
- </template>
- <script>
- import echarts from "echarts"
- export default {
- name: "doughnut",
- props: {
- id: {
- type: String,
- default: function createRandomId() {
- return (Math.random() * 10000000).toString(16).substr(0, 4) + '-' + (new Date()).getTime() + '-' + Math.random().toString().substr(2, 5);
- }
- },
- renderData: {
- type: Array,
- default: function () {
- return []
- }
- },
- type: {},
- name: "",
- sum: ""
- },
- data() {
- return {
- myCharts: null
- }
- },
- created() { },
- mounted() {
- this.drawDoughnut()
- },
- methods: {
- drawDoughnut() {
- let options = {
- tooltip: {
- trigger: 'item',
- formatter: ""
- },
- series: [
- {
- // name: '占比',
- type: 'pie',
- radius: '55%',
- center: ['50%', '60%'],
- data: this.renderData,
- label: {
- normal: {
- show: true,
- position: 'outside',
- textStyle: {
- fontSize: '11'
- }
- },
- emphasis: {
- show: true
- }
- },
- labelLine: {
- normal: {
- show: true,
- length: 20,
- lineStyle: {
- color: '#999'
- }
- },
- emphasis: {
- show: true
- }
- }
- },
- ],
- }
- this.myCharts = echarts.init(document.getElementById(this.id))
- this.myCharts.setOption(options)
- },
- delName(val) {
- if (!!val && val.length > 3) {
- return val.substring(0, 3) + '...'
- } else {
- return ''
- }
- }
- },
- watch: {
- renderData: {
- deep: true,
- handler: function () {
- this.drawDoughnut()
- }
- }
- }
- }
- </script>
- <style>
- </style>
|