Echarts的快速上手共分为五个步骤：
步骤一：下载并引入echarts.js文件
首先准备好js包，Echarts 提取码：txme
在PyCharm上新建项目Echarts，在该项目下新建包echarts,在该包下面新建包lib,将下载的两个js文件放在lib目录下
接下来可以在包echarts下新建HTML文件，取名为Echarts的快速上手
步骤二：准备一个具备大小的容器
<div id="main" style="width:600px; height:400px"> </div>
步骤三：初始化Echarts实例对象
var myChart = echarts.init(document.getElementById("main"));
步骤四：准备配置项 （重点）
var option={ title: { //配置标题组件，包含主标题和副标题
text: '这里是绘制图表的标题',
subtext: '这里是副标题'
},
tooltip: {},
legend: {//配置图表组件，一个echarts图表中可以存在多个图列组件
data: ['销量']
},
xAxis: { //配置x轴坐标系
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {}, //配置y轴坐标系
series: [{//配置系列列表，每一个系列通过type控制该系列图表类型
name:'销量',
type:'bar', //设置柱状图
data: [5,20,36,10,10,20]
},
]
};步骤五：将配置项设置给echarts实例对象
myChart.setOption(option);
完整代码1：
<!--<!DOCTYPE html>-->
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="lib/echarts.min.js"></script>
<!-- <title>Title</title>-->
</head>
<body>
<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: '这里是绘制图表的标题',
subtext: '这里是副标题'
},
tooltip: {},
legend: {//配置图表组件，一个echarts图表中可以存在多个图列组件
data: ['销量']
},
xAxis: { //配置x轴坐标系
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {}, //配置y轴坐标系
series: [{//配置系列列表，每一个系列通过type控制该系列图表类型
name:'销量',
type:'bar', //设置柱状图
data: [5,20,36,10,10,20]
},
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
完整代码2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 800px;
height: 500px;
background-color: rgb(188, 227, 236);
}
</style>
</head>
<body>
<!-- 步骤1：引入echarts.js文件 -->
<script src="lib/echarts.min.js"></script>
<!-- 步骤2：准备一个呈现图表的盒子 -->
<!-- <div style="width: 600px;height: 400px"></div> -->
<div class='box'></div>>
<script>
// 步骤3：初始化echarts实例对象
// 参数, dom,决定图表最终呈现的位置
var myChart = echarts.init(document.querySelector('.box'));
// 步骤4：准备配置项
var option = {
title:{
text:'Echarts 入门实例'
},
tooltip:{},
legend:{
data:['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫','裤子','高跟鞋','袜子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5,20,36,10,10,20]
}]
};
// 步骤5：将配置项设置给echarts实例对象
myChart.setOption(option);
</script>
</body>
</html>
使用dateset数据集绘制Echarts
dataset提供数据，第一行默认对应x轴
var option = { title:{text:'dateset数据集'},
legend: {},
tooltip: {},
dataset: {
// 提供一份数据。
source: [
['product','2015','2016','2017'],
['衬衫', 5,17,15],
['羊毛衫', 20,28,45],
['雪纺衫', 36,45,43],
['裤子', 10,16,33],
['高跟鞋', 10,24,21],
['袜子', 20,43,26]
]},
// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
xAxis: { type: 'category' },
// 声明一个 Y 轴，数值轴。
yAxis: {},
// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
series: [{ type: 'bar' },{ type: 'bar' },{ type: 'bar' }]
};完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dateset</title>
<style>
.box{
width: 800px;
height: 500px;
background-color: rgb(188, 227, 236);
}
</style>
</head>
<body>
<script src="lib/echarts.min.js"></script>
<div class='box'></div>>
<script>
var myChart = echarts.init(document.querySelector('.box'));
var option = {
title:{text:'dateset数据集'},
legend: {},
tooltip: {},
dataset: {
// 提供一份数据。
source: [
['product','2015','2016','2017'],
['衬衫', 5,17,15],
['羊毛衫', 20,28,45],
['雪纺衫', 36,45,43],
['裤子', 10,16,33],
['高跟鞋', 10,24,21],
['袜子', 20,43,26]
]},
// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
xAxis: { type: 'category' },
// 声明一个 Y 轴，数值轴。
yAxis: {},
// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
series: [{ type: 'bar' },{ type: 'bar' },{ type: 'bar' }]
};
// 步骤5：将配置项设置给echarts实例对象
myChart.setOption(option);
</script>
</body>
</html>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
