1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374 |
- <template>
- <div class="container">
- <div id="ELeft2" style="height:100%;"></div>
- </div>
- </template>
- <script>
- export default {
- name: "ELeft2",
- data() {
- return {};
- },
- mounted() {
- this.drawChart();
- },
- methods: {
- drawChart() {
- // 基于准备好的dom,初始化echarts实例
- let myChart = this.$echarts.init(document.getElementById("ELeft2"));
- // 指定图表的配置项和数据
- let option = {
- title: {
- text: "羊存栏种类",
- left: "20%",
- top: "5%",
- textStyle: {
- fontSize: 30
- }
- },
- tooltip: {
- trigger: "item",
- formatter: "{b}: {c} ({d}%)",
- textStyle: {
- fontSize: 20
- }
- },
- legend: {
- orient: "horizontal",
- bottom: 10,
- data: ["种母羊", "种公羊", "商品羊", "羔羊"],
- textStyle: {
- fontSize: 20
- }
- },
- series: [
- {
- type: "pie",
- // 内外圈厚度
- radius: ["20%", "60%"],
- label: {
- formatter: "{d}%"
- },
- data: [
- { value: 300, name: "种母羊" },
- { value: 300, name: "种公羊" },
- { value: 200, name: "商品羊" },
- { value: 200, name: "羔羊" }
- ],
- color: ["#FFB2FF", "#72DADA", "#3ABAFF", "#FF6A01"],
- label: {
- fontSize: 20
- }
- }
- ]
- };
- // 使用刚指定的配置项和数据显示图表。
- myChart.setOption(option);
- },
- },
- };
- </script>
- <style lang="scss" scoped>
- </style>
|