Echart Chart
Code Here:
<div id="basic-doughnut" style="height:400px;"></div>
Init Code
// ------------------------------
// Basic pie chart
// ------------------------------
// based on prepared DOM, initialize echarts instance
var basicdoughnutChart = echarts.init(document.getElementById('basic-doughnut'));
var option = {
// Add title
title: {
text: 'Browser popularity',
subtext: 'Open source information',
x: 'center'
},
// Add legend
legend: {
orient: 'vertical',
x: 'left',
data: ['Internet Explorer','Opera','Safari','Firefox','Chrome']
},
// Add custom colors
color: ['#ffbc34', '#4fc3f7', '#212529', '#f62d51', '#2962FF'],
// Display toolbox
toolbox: {
show: true,
orient: 'vertical',
feature: {
mark: {
show: true,
title: {
mark: 'Markline switch',
markUndo: 'Undo markline',
markClear: 'Clear markline'
}
},
dataView: {
show: true,
readOnly: false,
title: 'View data',
lang: ['View chart data', 'Close', 'Update']
},
magicType: {
show: true,
title: {
pie: 'Switch to pies',
funnel: 'Switch to funnel',
},
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
y: '20%',
width: '50%',
height: '70%',
funnelAlign: 'left',
max: 1548
}
}
},
restore: {
show: true,
title: 'Restore'
},
saveAsImage: {
show: true,
title: 'Same as image',
lang: ['Save']
}
}
},
// Enable drag recalculate
calculable: true,
// Add series
series: [
{
name: 'Browsers',
type: 'pie',
radius: ['50%', '70%'],
center: ['50%', '57.5%'],
itemStyle: {
normal: {
label: {
show: true
},
labelLine: {
show: true
}
},
emphasis: {
label: {
show: true,
formatter: '{b}' + 'nn' + '{c} ({d}%)',
position: 'center',
textStyle: {
fontSize: '17',
fontWeight: '500'
}
}
}
},
data: [
{value: 335, name: 'Internet Explorer'},
{value: 310, name: 'Opera'},
{value: 234, name: 'Safari'},
{value: 135, name: 'Firefox'},
{value: 1548, name: 'Chrome'}
]
}
]
};
Required Files For Echart Here
<!-- Javascript Here -->
<script src="../assets/libs/echarts/dist/echarts-en.min.js"></script>