簡單的寫了幾個可能

常用的巢狀效果圖,大家可以參考一下、

npm install echarts

html程式碼:

<template>
  <div>
    <el-row>
      <el-col :span="8">
        <el-card>
            <div id="main2" class="pie-class"></div>
        </el-card>
      </el-col>
      <el-col :span="8"
 
>
        <el-card>
            <div id="main3" class="pie-class"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
            <div id="main4" class="pie-class"></div>
        </el-card>
      </el-col>
 

    </el-row>
    <el-row>
      <el-card>
          <div id="main1" class="pie-class"></div>
      </el-card>
    </el-row>
  </div>
</template>

js程式碼:

<script>
import echarts from 'echarts'
export default {
  // 此時頁面上的元素，已經被渲染完畢
  mounted() {
    
 
// 3.基於準備好的dom，初始化echarts例項
    var myChart1 = echarts.init(document.getElementById('main1'));
    var myChart2 = echarts.init(document.getElementById('main2'));
    var myChart3 = echarts.init(document.getElementById('main3'));
    var myChart4 = echarts.init(document.getElementById('main4'));

    // 4.指定圖表的配置項和資料
    var option1 = {
      title: {
        text: '測試1'
      },
      tooltip: {},
      legend: {
        data: ['數量']
      },
      xAxis: {
        data: ['資產A', '資產B', '資產C', '資產D', '資產E', '資產F']
      },
      yAxis: {},
      series: [{
        name: '數量',
        type: 'line',
        label: {
          normal: {
            show: true,
            position:'top',
            formatter: '{c}'//百分比顯示，模板變數有 {a}、{b}、{c}、{d}，分別表示系列名，資料名，資料值，百分比。{d}資料會根據value值計算百分比
          }
        },
        data: [5, 20, 36, 10, 10, 20]
      }]
    }
    var option2 = {
      title: {
        text: '測試2'
      },
      series: [{
        name: '類別',
        type: 'pie',
        radius: [0, '45%'],
        label: {
          normal: {
            position:'inner',
            formatter: '{b} \n {d}%'//百分比顯示，模板變數有 {a}、{b}、{c}、{d}，分別表示系列名，資料名，資料值，百分比。{d}資料會根據value值計算百分比
          }
        },
        labelLine: {
            normal: {
                show: true,
            }
        },
        data: [{value:100,name:'IT資產'}, {value:200,name:'非IT資產'}],
        color: ['#000704', '#a295b4']
      },{
        name: '分佈',
        type: 'pie',
        radius: ['50%','70%'],
        label: {
          normal: {
            position:'top',
            formatter: '{b} \n {d}%'//百分比顯示，模板變數有 {a}、{b}、{c}、{d}，分別表示系列名，資料名，資料值，百分比。{d}資料會根據value值計算百分比
          }
        },
        data: [{value:100,name:'部門A'}, {value:200,name:'部門B'}, {value:30,name:'部門C'}],
        color: ['#37A2DA', '#00f200', '#f80013']
      }
      ]
    }
    var option3 = {
      title: {
        text: '測試3'
      },
      series: [{
        name: '數量',
        type: 'pie',
        radius: ['50%','70%'],
        label: {
          normal: {
            position:'top',
            formatter: '{b} \n {d}%'//百分比顯示，模板變數有 {a}、{b}、{c}、{d}，分別表示系列名，資料名，資料值，百分比。{d}資料會根據value值計算百分比
          }
        },
        data: [{value:100,name:'部門A'}, {value:200,name:'部門B'}, {value:30,name:'部門C'}],
        color: ['#37A2DA', '#00f200', '#f80013']
      }]
    };
    var option4 = {
      title: {
        text: '測試4'
      },
      series: [{
        name: '數量',
        type: 'pie',
        radius: ['50%','70%'],
        label: {
          normal: {
            position:'top',
            formatter: '{b} \n {d}%'//百分比顯示，模板變數有 {a}、{b}、{c}、{d}，分別表示系列名，資料名，資料值，百分比。{d}資料會根據value值計算百分比
          }
        },
        data: [          // 資料陣列，name 為資料項名稱，value 為資料項值
                        {value:235, name:'部門A1'},
                        {value:274, name:'部門A2'},
                        {value:310, name:'部門A3'},
                        {value:335, name:'部門A4'},
                        {value:400, name:'部門A5'}
                    ],
        color: ['#37A2DA', '#00f200', '#f80013']
      }]
    };
    
    // 5.使用剛指定的配置項和資料顯示圖表。
    myChart1.setOption(option1);
    myChart2.setOption(option2);
    myChart3.setOption(option3);
    myChart4.setOption(option4);
  }
}
</script>

轉載 ：https://blog.csdn.net/qq_37558589/article/details/108334398

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

引入echars5.0報錯“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘

解決

引入方式改為

import * as echarts from 'echarts';
// 或
const echarts = require('echarts');