ECharts基本使用

ECharts的基本使用

<script src="../../libs/jquery.min.js"></script>
<script src="../../assets/js/echarts/echarts.min.js"></script>

2.创建图形容器

<div id="current_A" style="width: 600px;height:400px"></div>

3.初始化echarts实例

var myChart = echarts.init(document.getElementById("current_A"));

4.配置信息

var num1 = [];//模拟数据1 有真实数据可以自行修改
var num2 = [];//模拟数据2
for(var i=0;i<15;i++){
num1.push(Math.random() * 2000 + 15000);
num2.push(Math.random() * 2000 + 13000);
}
var _x_axis = [];//x轴
for (var i = 0; i < 30; i++) {
_x_axis.push(i)
}
//配置信息
option = {
title : {
text : "硕爸爸的图"
},
tooltip : {
trigger : "axis"
},
legend: {//图例
data: ['模拟数据1', '模拟数据2']
},
toolbox: {
show: true,
feature: {
magicType: { show: true, type: ['line', 'bar'] },//曲线、柱状图
saveAsImage: { show: true }
}
},
calculable: true,
grid:{
top:"35px",
left:"50px",
right:"10px",
bottom:"50px"
},
xAxis:{
type: 'category',
boundaryGap: false,
data: _x_axis
},
yAxis:{
type: 'value',
min:12000,
max:18000,
},
series: [
{
name: '模拟数据1',//值与图例中的name保持一致才显示图例
type: 'line',
data: num1
},
{
name: '模拟数据2',//值与图例中的name保持一致才显示图例
type: 'line',
data: num2
}
]
};

使用制定的配置项和数据显示图表

myChart.setOption(option,true);

双曲线的结果

也可以变成单曲线

柱状图

单柱状图

• 点赞
• 收藏
• 分享
• 文章举报