vue+element+echarts實現簡單巢狀餅圖+折線圖+巢狀圖
阿新 • • 發佈:2021-07-11
簡單的寫了幾個可能
常用的巢狀效果圖,大家可以參考一下、
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');