| | |
| | | components: {}, |
| | | data() { |
| | | //这里存放数据 |
| | | return {}; |
| | | return { myChart }; |
| | | }, |
| | | mounted() { |
| | | this.lineChart(); |
| | | this.$bus.$on('resizeEchart', (res) => { |
| | | this.myChart.resize(); |
| | | }); |
| | | }, |
| | | //方法集合 |
| | | methods: { |
| | | lineChart() { |
| | | let option = { |
| | | title: { |
| | | text: "项目类别", |
| | | text: '项目类别', |
| | | textStyle: { |
| | | color: "#fff", |
| | | color: '#fff', |
| | | }, |
| | | }, |
| | | tooltip: { |
| | | trigger: "item", |
| | | trigger: 'item', |
| | | }, |
| | | legend: { |
| | | top: "5%", |
| | | right: "0", |
| | | top: '5%', |
| | | right: '0', |
| | | textStyle: { |
| | | fontSize: 12, |
| | | color: "#fff", |
| | | color: '#fff', |
| | | }, |
| | | }, |
| | | series: [ |
| | | { |
| | | name: "项目类别", |
| | | type: "pie", |
| | | radius: ["45%", "55%"], |
| | | name: '项目类别', |
| | | type: 'pie', |
| | | radius: ['45%', '55%'], |
| | | // avoidLabelOverlap: false, |
| | | label: { |
| | | formatter: "{b}:{c}", |
| | | formatter: '{b}:{c}', |
| | | textStyle: { |
| | | fontSize: 12, |
| | | color: "#fff", |
| | | color: '#fff', |
| | | }, |
| | | }, |
| | | |
| | |
| | | // show: false, |
| | | }, |
| | | data: [ |
| | | { value: 2, name: "站场类" }, |
| | | { value: 5, name: "管道类" }, |
| | | { value: 2, name: '站场类' }, |
| | | { value: 5, name: '管道类' }, |
| | | ], |
| | | }, |
| | | ], |
| | | }; |
| | | let myChart = this.$echarts.init(document.getElementById("echart31")); |
| | | myChart.setOption(option); |
| | | window.addEventListener("resize", function () { |
| | | myChart.resize(); |
| | | this.myChart = this.$echarts.init(document.getElementById('echart31')); |
| | | this.myChart.setOption(option); |
| | | window.addEventListener('resize', function () { |
| | | this.myChart.resize(); |
| | | }); |
| | | }, |
| | | }, |