The quick start of Echarts is divided into five steps:
Step 1: Download and import the echarts.js file
First prepare the js package, Echarts
extraction code: txme
Create a new project Echarts on PyCharm, create a new package echarts under the project, create a new package lib under the package, and place the downloaded two js files in the lib directory
Next, you can create a new HTML file under the package echarts and name it Echarts Quick Start
Step 2: Prepare a container with a size
<div id="main" style="width:600px; height:400px"> </div>
Step 3: Initialize the Echarts instance object
var myChart = echarts.init(document.getElementById("main"));
Step 4: Prepare configuration items (emphasis)
var option={
title: { //Configure the title component, including the main title and subtitle
text: 'Here is the title for drawing the chart',
subtext: 'Here is the subtitle'
},
tooltip: {},
legend: {//Configure the chart Components, there can be multiple chart components in an echarts chart
data: ['sales']
},
xAxis: { //Configure the x-axis coordinate system
data: ["shirt", "cardigan", "chiffon sweater" ,"pants","high heels","socks"]
},
yAxis: {}, //Configure the y-axis coordinate system
series: [{//Configure the series list, each series controls the series chart type
name:' Sales',
type:'bar', //Set bar chart
data: [5,20,36,10,10,20]
},
]
};
Step 5: Set the configuration item to the echarts instance object
myChart.setOption(option);
Complete code 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>
Complete code 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>
Draw Echarts using dateset dataset
dataset provides data, the first row corresponds to the x-axis by default
var option = {
title:{text:'dateset dataset'},
legend: {},
tooltip: {},
dataset: {
// Provide a data set.
source: [
['product','2015','2016','2017'],
['shirt', 5,17,15],
['cardigan', 20,28,45],
['snow Spinning shirt', 36,45,43],
['pants', 10,16,33],
['high heels', 10,24,21],
['socks', 20,43,26]
]},
/ / Declare an X axis, the category axis (category). By default, the category axis corresponds to the first column of the dataset.
xAxis: { type: 'category' },
// declare a Y axis, value axis.
yAxis: {},
// Declare multiple bar series. By default, each series will automatically correspond to each column of the dataset.
series: [{ type: 'bar' },{ type: '
Full code:
<!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>