版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_31653405/article/details/82665238
参考官网：[ http://echarts.baidu.com/echarts2/doc/doc.html ]
讲解 ---- 基本结构
// 图表实例化------------------
// srcipt标签式引入
var myChart = echarts.init(document.getElementById('main'));
// 过渡---------------------
myChart.showLoading({
text: '正在努力的读取数据中...', //loading话术
});
// ajax getting data...............
// ajax callback
myChart.hideLoading();
// 图表使用-------------------
var option = {
legend: { // 图例配置
padding: 5, // 图例内边距，单位px，默认上下左右内边距为5
itemGap: 10, // Legend各个item之间的间隔，横向布局时为水平间隔，纵向布局时为纵向间隔
data: ['ios', 'android']
},
tooltip: { // 气泡提示配置
trigger: 'item', // 触发类型，默认数据触发，可选为：'axis'
},
xAxis: [ // 直角坐标系中横轴数组
{
type: 'category', // 坐标轴类型，横轴默认为类目轴，数值轴则参考yAxis说明
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}
],
yAxis: [ // 直角坐标系中纵轴数组
{
type: 'value', // 坐标轴类型，纵轴默认为数值轴，类目轴则参考xAxis说明
boundaryGap: [0.1, 0.1], // 坐标轴两端空白策略，数组内数值代表百分比
splitNumber: 4 // 数值轴用，分割段数，默认为5
}
],
series: [
{
name: 'ios', // 系列名称
type: 'line', // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
},
{
name: 'android', // 系列名称
type: 'line', // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
data: [45, 123, 145, 526, 233, 343, 44, 829, 33, 123, 45, 13]
}
]
};
myChart.setOption(option);
...
// 增加些数据------------------
option.legend.data.push('win');
option.series.push({
name: 'win', // 系列名称
type: 'line', // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
});
myChart.setOption(option);
...
// 图表清空-------------------
myChart.clear();
// 图表释放-------------------
myChart.dispose();举例：
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src='/js/echarts.common.min.js'></script>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<div class="x-body">
<div class="basic">
<!-- 条形图 -->
<div id='main2' style='width:50%;height:450px;float: left;'></div>
<!-- 饼图 -->
<div id='main3' style='width:50%;height:450px;float: right;'></div>
</div>
</div> $(document).ready(function () {
showPieChart();//饼图
showHistogramChart();//柱状图
}); function showHistogramChart(){
var myChart = echarts.init(document.getElementById('main2'));
$.ajax({
type : 'get', //传输类型
url : "/chartAnalysis/showHistogramChart",
async : true,
dataType : "json",
success:function(data){
var bdMoney = data.bdMoney;
var type = data.type;
var option = {
title:{ text : ' ' },
tooltip:{},
legend:{ data : [ '种类' ] },
xAxis:{ data : type,
axisLabel: {
interval:0,
rotate:40
}
},
yAxis:{ },
series:{ name : '金额', type : 'bar', data : bdMoney,barWidth:57,
itemStyle : {
normal: {
label : { show: true, position:'top', formatter: ' ' },
color: function(params) {
var colorList = [
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
];
return colorList[params.dataIndex]
},
}
}
}
}
myChart.setOption(option);
}
});
} function showPieChart(){
var myChart = echarts.init(document.getElementById('main3'));
$.ajax({
type : 'get', //传输类型
url : "/chartAnalysis/showHistogramChart",
async : true,
dataType : "json",
success:function(data){
var bdMoney = data.bdMoney;
var sumType = data.type;
myChart.setOption({
title:{ text : ' ',show:true },
tooltip : { trigger : 'item', formatter : '{a} {b} \n {c} ( {d}% )',show : true },
legend:{ orient : 'horizontal', y: 'bottom', data : ['分红奖','平级奖','推荐人所得奖'] , show : true, borderWidth: 4, },
series : [ { name : '', type : 'pie', radius : '55%', center : [ '50%', '60%' ],
data : [
{value:bdMoney[0],name:'销售额'},
{value:bdMoney[1],name:'利润'},
{value:bdMoney[2],name:'分红奖'},
{value:bdMoney[3],name:'平级奖'},
{value:bdMoney[4],name:'推荐人所得奖'}
],
itemStyle: {
normal:{ show:true, position:'inner', label:{ show: true, formatter: '{a} {b} \n {c} ( {d}% )' }, labelLine :{show:true} },
color: function(params) {
var colorList = [
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
];
return colorList[params.dataIndex]
},
}
} ]
});
}
});
}--------------------------------------------------------------------------------------------------------------
以上是自己整理的，并测试过，可以直接用
----------------------------------------------------------------------------------------------------------------
文章中，有问题，可以在评论区评论，一起探讨编程中奥秘！
----------------------------------------------------------------------------------------------------------------
来都来了，代码看都看了，那就留个言呗，可以互动下！
----------------------------------------------------------------------------------------------------------------
转载声明：本文为博主原创文章，未经博主允许不得转载。