echarts Chinese documents Address: https://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
Introduced by way of demand
Echarts installation package is not to say, there are codes on a
How to draw a pie chart to see today
<Template>
<div>
<div class = "PIE">
<div ID = "PIE1">
<-! to prepare ECharts includes a size (width and height) of the DOM ->
<div ID = "MAIN1" style = "a float: left; width: 100%; height: 300px by"> </ div>
</ div>
<div ID = "PIE2">
<div ID = "MAIN2" style = "a float: left; width: 100%; height: 300px by "> </ div>
</ div>
</ div>
</ div>
</ template>
<Script> // introduced substantially template
let echarts = require ( 'echarts / lib / echarts')
// introduced into pie -shaped graph component
the require ( 'echarts / lib / Chart / PIE' )
// introduction title balloon assembly and
the require ( 'echarts / lib / Component / ToolTip' )
the require ( 'echarts / lib / Component / title' )
Export default {
Created () {
},
Mounted () {
the this .initData ();
},
Methods: {
// initialization data
initData () {
// based ready dom, instance initialization echarts
var myChart = echarts.init (document.getElementById ( 'MAIN1' ));
// charting
myChart.setOption ({
title: {
text: 'a site users to access source ' , // main title
subtext: ' pure fiction ' , // subtitle
the X-:'center', // x-axis direction, the alignment
},
ToolTip: {
Trigger: 'Item' ,
Formatter: "{A} a {B}: {C} ({D}%)"
},
Legend: {
Orient: 'Vertical Number of' ,
bottom: 'bottom' ,
the Data: [ 'direct access',' email marketing ',' affiliate advertising ',' video ads, '' Search engines' ]
},
Series: [
{
name: ' referrer ' ,
of the type: ' PIE ' ,
radius : '55%',
Center: [ '50% ', '60%' ],
Data: [
{value: 335, name: 'Direct Access' },
{value: 310, name: 'email marketing' },
{value: 234, name : 'affiliate advertising' },
{value: 135, name: 'video ad' },
{value: 1548, name: 'search engine' }
],
ItemStyle: {
emphasis: {
the shadowBlur: 10 ,
shadowOffsetX:0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
},
}
}
</script>
Renderings
