| | |
| | | <template> |
| | | <basic-container> |
| | | <basic-container style="width: 100%"> |
| | | <v-chart :options="chartOptions" :auto-resize="true" id="chart"></v-chart> |
| | | </basic-container> |
| | | </template> |
| | |
| | | import 'echarts/lib/component/legend' |
| | | export default { |
| | | name: "pieChart", |
| | | props:{ |
| | | pieData:{ |
| | | type:Array, |
| | | default:[] |
| | | }, |
| | | chartName:{ |
| | | type:String, |
| | | default: "" |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | chartOptions: { |
| | |
| | | tooltip: { |
| | | trigger: 'item', |
| | | formatter: function (params) { |
| | | var result = ''; |
| | | let result = ''; |
| | | if (params.componentType === 'series') { |
| | | result += params.name + '<br/>'; |
| | | result += '新增:' + params.data.newValue + '<br/>'; |
| | |
| | | itemStyle: { |
| | | color: function(params) { |
| | | // 根据具体需求设置颜色 |
| | | var colorList = ['#5470C6', '#91CC75', '#fac858', '#EE6666', '#3BA272', '#FC8452', '#9A60B4', '#e34d4d', '#b3e9b9', '#eaaaed', '#1bc6e4', '#c6b3e9']; |
| | | const colorList = ['#5470C6', '#91CC75', '#fac858', '#EE6666', '#3BA272', '#FC8452', '#9A60B4', '#e34d4d', '#b3e9b9', '#eaaaed', '#1bc6e4', '#c6b3e9']; |
| | | return colorList[params.dataIndex % colorList.length]; |
| | | } |
| | | }, |
| | |
| | | |
| | | <style scoped lang="scss"> |
| | | #chart { |
| | | width: 800px; |
| | | height: 600px; |
| | | width: 90%; |
| | | height: 530px; |
| | | } |
| | | |
| | | </style> |