123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126 |
- <template>
- <div style="width:100%;height:100%;" :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 []
- }
- }
- },
- data() {
- return {
- myCharts: null
- }
- },
- created() {},
- mounted() {
- this.drawDoughnut()
- },
- methods: {
- drawDoughnut() {
- console.log(this.renderData, "renderData")
- let options = {
- tooltip: {
- trigger: 'item',
- formatter: "{b}: ({d}%)"
- },
- legend: {
- orient: 'horizontal',
- x: 'center', // 'center'
- data: this.renderData.map(item => {
- return item.name
- })
- },
- graphic: {
- type: 'text',
- left: 'center',
- top: 'center',
- style: {
- text: '数据源\n1111',
- textAlign: 'center',
- fill: '#000',
- width: 30,
- height: 30
- }
- },
- series: [{
- name: '',
- type: 'pie',
- radius: ['40%', '60%'],
- itemStyle: {
- normal: {
- label: {
- show: true,
- textStyle: {
- color: '#3c4858',
- fontSize: "9"
- },
- formatter: function(val) { //让series 中的文字进行换行
- console.log(val,val)
- return val.name.split("-")[0];
- }
- },
- title: {
- text: 'aaaa'
- },
- labelLine: {
- show: false,
- lineStyle: {
- color: '#3c4858'
- }
- }
- },
- emphasis: {
- shadowBlur: 5,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)',
- textColor: '#000'
- }
- },
- // data: [{
- // value: 20,
- // name: "1"
- // },
- // {
- // value: 20,
- // name: "2"
- // },
- // {
- // value: 15,
- // name: "3"
- // }
- // ]
- data: this.renderData
- }],
- color: ['#9DA2D6', '#FBACA1', '#FFE37F']
- }
- this.myCharts = echarts.init(document.getElementById(this.id))
- this.myCharts.setOption(options)
- },
- },
- watch: {
- renderData: {
- deep: true,
- handler: function() {
- this.drawDoughnut()
- }
- }
- }
- }
- </script>
- <style>
- </style>
|