vue+element+echarts實現簡單嵌套餅圖+折線圖+嵌套圖

簡單的寫了幾個可能

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

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');