123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172 |
- <template>
- <div id="box3" style="width:100%;height:100%;"></div>
- </template>
- <script>
- import echarts from "echarts";
- export default {
- data() {
- return {};
- },
- mounted() {
- this.$nextTick(function() {
- this.pie(this.energySavingRate, "#box3", ["#00D6B9", "#D5F6F2"]);
- });
- },
- props: ["energySavingRate"],
- methods: {
- pie(pieData, box, colors) {
- const that = this;
- const myChart = echarts.init(document.querySelector(box));
- const data = pieData;
- const option = {
- grid: {
- top: 5,
- bottom: 5
- },
- color: colors,
- series: [
- {
- name: "valueOfMarket",
- type: "pie",
- center: ["50%", "50%"],
- radius: ["60%", "70%"],
- avoidLabelOverlap: false,
- hoverAnimation: false,
- label: {
- normal: {
- show: true,
- position: "center",
- color: "#000000",
- fontSize: 20,
- lineHeight: 0,
- formatter: "{b}\n{c}%"
- }
- },
- data: [
- {
- value: data,
- label: {
- normal: {
- show: true
- }
- }
- },
- {
- value: 100 - data,
- name: "",
- label: {
- normal: {
- show: false
- }
- }
- }
- ]
- }
- ]
- };
- myChart.setOption(option);
- }
- }
- };
- </script>
|