ECharts实例--饼状图

ECharts实例--饼状图

引入 可视化视觉库

<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

页面中一定要有一个具备宽高的dom元素

<div id="main"></div>

script，js脚本

分4步操作，如下所示：

1.抓取元素（指定图表存放的 位置）

2.初始化echarts实例

3.指定图表的配置项和数据

4.使用刚指定的配置项和数据显示图表

// 1.抓取元素（指定图表存放的 位置）
var main = document.getElementById("main");

// 2.初始化echarts实例
var myChart = echarts.init(main);
console.log(myChart);

// 3.指定图表的配置项和数据
var option = {
//title图表标题
title: {
text: '商品饼状图',
x: 'right', //水平安放位置
y: 'top', //垂直安放位置
textStyle: {
color: '#006699',
fontSize: '20', //注意，这里不要带px，否则不起作用
fontWeight: ''
}
},
//tooltip提示框
tooltip: {

},
//legend图例
legend: {
data: ['商品销量'],
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderColor: '', //图例边框颜色
borderWidth: 0, //图例边框线宽
padding: 6, //图例内边距
textStyle: {
color: '#006699' //图例文字颜色
}
},
series: [{
name: '商品销量', // 是和图例中data中的数据要“保持一致”
type: 'pie', //图形
radius:'55%',//饼图的半径，外半径为可视区尺寸（容器高宽中较小一个）
//柱形图默认参数 bar
// 折线图默认参数 line
// K线图默认参数 k
// 散点图默认参数 scatter
// 饼图默认参数 pie
// 雷达图默认参数 radar
data: [
{value:5, name:'衬衫'},
{value:20, name:'羊毛衫'},
{value:36, name:'雪纺衫'},
{value:10, name:'裤子'},
{value:10, name:'高跟鞋'},
{value:20, name:'袜子'}
]
// 是这 xAxis.data一一对应的
}]

};

// 4.使用刚指定的配置项和数据显示图表
//  setOption 方法生成一个简单的饼状图
myChart.setOption(option)