echars建立基本图表:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
图例样式编辑:
legend: { //图例组件 right:68, //图例组件离右边的距离 orient : 'vertical', //布局 纵向布局 width:40, //图行例组件的宽度,默认自适应 x : 'right', //图例显示在右边 itemWidth:10, //图例标记的图形宽度 itemHeight:10, //图例标记的图形高度 data:['30%','10%','15%','20%','25%'], textStyle:{ //图例文字的样式 color:'#333', fontSize:12 } },
修改x/y轴样式:
- xAxis : [
- {
- type : 'value',
- splitNumber: 2,
- scale: true,
- show:false, //去掉x轴线
- splitLine:{
- show:false
- }
- }
- ],
- yAxis : [
- {
- type : 'value',
- splitNumber: 2,
- scale: true,
- show:false, //去掉y轴线
- splitLine:{
- show:false
- }
- }
- ],
调整图表位置:
①
- grid: {
- left: '8%',
- right: '0',
- bottom: '1%',
- containLabel: true
- }
②
设置series的 center:['70%','50%'],百分比。
简单雷达图:
option = {
radar: [
{
indicator: [
{text: '品牌', max: 100},
{text: '内容', max: 100},
{text: '可用性', max: 100},
{text: '功能', max: 100}
],
center: ['15%','40%'],
radius: 80
}
],
series: [
{
type: 'radar',
tooltip: {
trigger: 'item'
},
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data: [
{
value: [60,73,85,40],
name: '某软件'
}
]
}
]
};