vue+element+echarts实现简单嵌套饼图+折线图+嵌套图

• Z时代
• 2024-01-10
• 分类：综合

简单的写了几个可能

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

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

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

解决

引入方式改为

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

以上是 vue+element+echarts实现简单嵌套饼图+折线图+嵌套图 的全部内容， 来源链接： utcz.com/z/378699.html