使用echart绘制图表时，解决数据重新渲染问题以及根据返回数据的区别绘制不同的图表，本示例根据数据不同，绘制柱状图或者曲线图
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#chart_data{
display: inline-block;
text-align:center;
vertical-align: middle;
width:70%;
overflow:hidden;
overflow-y: auto;
}
.work_achievements {
display: inline-block;
width: 30%;
height: 400px;
float: right;
box-sizing: border-box;
}
.work_achievements_title,#chart_data_title,#admax_title {
border: none !important;
line-height: 40px;
height: 40px;
padding: 10px !important;
font-size: 14px;
background: #fff;
color: #666;
border-bottom: 3px solid rgb(241, 243, 251) !important;
text-align: left;
}
#chart_data h3,
#admax_title h3,
.work_achievements_title h3 {
font-size: 14px;
color: #666;
font-weight: normal;
}
.work_achievements .select_day_show_data {
margin: 20px 0 20px 10px;
display: inline-block;
border-radius: 3px;
border: 1px solid #ccc;
color: #666;
overflow: hidden;
}
.work_achievements .select_day_show_data .nearly_days {
display: inline-block;
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
}
.work_achievements .select_day_show_data .nearly_days:nth-child(2) {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.work_achievements .select_day_show_data .nearly_days.current_show_day {
background: rgb(24, 158, 219);
color: #fff;
}
#nearly_days_data_visual,#chart_data_content,#admax_content {
text-align: center;
vertical-align: middle;
height: 330px;
}
#chart_data_content,#admax_content{
height:360px;
}
</style>
</head>
<body>
<div class="work_achievements">
<div class="work_achievements_title">
<div style="width: 200px; float: left; text-align: left;">
<h3>工作战绩</h3>
</div>
</div>
<div class="select_day_show_data">
<span class="nearly_days nearly_three_days current_show_day" data-val="3">近3天</span>
<span class="nearly_days nearly_seven_days" data-val="7">近7天</span>
<span class="nearly_days nearly_thirty_days" data-val="30">近30天</span>
</div>
<div id="nearly_days_data_visual"></div>
</div>
<div id="chart_data" data-val="chart_data" class="comomn">
<div id="chart_data_title">
<h3>近期(15天)订单数</h3>
</div>
<div id="chart_data_content"></div>
</div>
<div id="admax" data-val="admax" class="comomn">
<div id="admax_title">
<h3>混合</h3>
</div>
<div id="admax_content"></div>
</div>
</body>
<script src="https://libs.cdnjs.net/jquery/3.3.1/jquery.min.js"></script>
<script src="https://libs.cdnjs.net/echarts/4.1.0.rc2/echarts.min.js"></script>
<script>
getData(11, 'bar', $('.nearly_three_days'));
getData(11, 'line', $("#chart_data"));
getData(11, 'max', $("#admax"));
//工作战绩切换
$('.work_achievements .select_day_show_data .nearly_days').click(function () {
$(this).siblings('span').removeClass('current_show_day');
$(this).addClass('current_show_day');
getData(11, 'bar', $(this));
});
//仓库数据面板展示、工作战绩统计
function getData(data, type, obj) {
var xdata = [];
var ydata = [];
var myChart = '';
//默认公用属性
var option = {
// title: {
// // text: data.name
// text: '近期(15天)订单数'
// },
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
formatter: function (params) {
return params[0].seriesName + ': ' + params[0].value;
}
},
calculable: true,
axis: {
axisTick: {
lineStyle: {
color: '#ccc',
width: 1
}
}
},
xAxis: {
type: 'category',
boundaryGap: true, //X轴与Y轴重叠false重叠
axisLine: {
lineStyle: {
color: '#999' //xy坐标点具体的颜色
}
},
splitLine: {
show: false, //是否显示分隔线
lineStyle: {
type: 'dotted', //分隔线线的类型。'solid' 'dashed' 'dotted'
color: ['#ccc'] //x坐标轴网格线颜色
}
}
},
yAxis: [{
type: 'value',
min: 0,
splitLine: {
show: true, //是否显示分隔线
lineStyle: {
type: 'dotted', //分隔线线的类型。'solid' 'dashed' 'dotted'
color: ['#ccc'] ////y坐标轴网格线颜色
}
},
splitArea: {show: false},//保留网格区域
//显示格式化
axisLabel: {
formatter: '{value} ',
textStyle: {
color: '#999',//y坐标点具体的颜色
}
},
axisLine: {
lineStyle: {
color: '#ccc'
}
},
}
],
series: [
{
type: type,
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
//formatter: '{c}'
//formatter: '{b}\n{c}'
}
},
},
}]
};
if(obj.hasClass('comomn')){
//测试数据start
xdata = ['06-19', '06-20', '06-21', '06-22', '06-23', '06-24', '06-25', '06-26', '06-27', '06-28', '06-29', '06-30', '07-01', '07-02', '07-03'];
ydata = [100, 106, 500, 192, 80,230, 150, 400, 290, 110, 0, 0, 8, 59, 18];
var colorList = [];
//每一条柱状图的颜色
var colors = [
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
];
for(var i=0;i<ydata.length;i++){
colorList.push(colors[Math.floor(Math.random()*15+1)]);
}
//测试数据end
option.grid = {
top: '25px',
left: '10px',
right: '40px',
bottom: '60px',
containLabel: true
};
if (obj.data('val') == 'chart_data') {
myChart = echarts.init(document.getElementById('chart_data_content'));
$('#chart_data_content').removeAttr('_echarts_instance_'); //需要移除此属性才能重新渲染
//
option.legend = {
legend: {
data: ['支付笔数']
}
};
option.series[0]['name'] = '支付笔数';
option.series[0]['itemStyle']['normal']['color'] = '#3ec668';
option.series[0]['data'] = ydata;
option.yAxis[0]['interval'] = Math.ceil(Math.max.apply(null, ydata) / 10);
option.yAxis[0]['max'] = Math.max.apply(null, ydata);
option.xAxis.data = xdata;
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option, true);
}else if(obj.data('val') == 'admax'){
myChart = echarts.init(document.getElementById('admax_content'));
$('#admax_content').removeAttr('_echarts_instance_'); //需要移除此属性才能重新渲染
//控制文字显示
option.legend = {
legend: {
data:["柱状图","折线图"]
}
};
option.series = [
{
name: '折线图', //点击显示与隐藏
type: 'line',
itemStyle : {
normal : {
lineStyle:{
color:'#009688'
}
}
},
data: ydata
},
{
name: '柱状图',
type: 'bar',
itemStyle : {
normal: {
//定义一个list，然后根据所以取得不同的值，这样就实现了，
color: function(params) {
return colorList[params.dataIndex]
},
//以下为是否显示，显示位置和显示格式的设置了
label: {
show: true,
position: 'top',
//formatter: '{c}'
//formatter: '{b}\n{c}'
}
},
},
barWidth:20,
data: ydata
}
];
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option, true);
}
}else if (obj.hasClass('nearly_days')) {
var current_data_val = obj.data('val');
//测试数据start
for (var i = 0; i < current_data_val; i++) {
ydata.push(parseInt(Math.random() * 50 + 100));
}
var xdata_arr = [];
xdata_arr[3] = ['07-01', '07-02', '07-03'];
xdata_arr[7] = ['06-27', '06-28', '06-29', '06-30', '07-01', '07-02', '07-03'];
xdata_arr[30] = ['06-04', '06-05', '06-06', '06-07', '06-08', '06-09', '06-10', '06-11', '06-12', '06-13', '06-14', '06-15', '06-16', '06-17', '06-18', '06-19', '06-20', '06-21', '06-22', '06-23', '06-24', '06-25', '06-26', '06-27', '06-28', '06-29', '06-30', '07-01', '07-02', '07-03'];
xdata = xdata_arr[current_data_val];
//测试数据end
var myChart = echarts.init(document.getElementById('nearly_days_data_visual'));
$('#nearly_days_data_visual').removeAttr('_echarts_instance_'); //需要移除此属性才能重新渲染
option.grid = {
top: '20px',
left: '10px',
right: '40px',
bottom: '40px',
containLabel: true
};
option.series[0]['name'] = '工作战绩';
option.series[0]['data'] = ydata;
option.series[0]['itemStyle']['normal']['color'] = 'rgb(88,175,255)';
option.series[0]['barWidth'] = 20;
option.yAxis[0]['max'] = Math.max.apply(null, ydata);
option.xAxis.data = xdata;
if (current_data_val == '30') {
option.dataZoom = [
{ // 这个dataZoom组件，默认控制x轴。
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
start: 0, // 左边在 0% 的位置。
end: 40 // 右边在 100% 的位置。
},
{ // 这个dataZoom组件，也控制x轴。
type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
start: 0, // 左边在 0% 的位置。
end: 100 // 右边在 100% 的位置。
}
];
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option, true);
}
}
</script>
</html>