我要评论目录
一.visual studio code
1.下载安装包
下载网址:https://code.visualstudio.com/download
2.安装扩展
扩展——中文语言包
安装完成——右下角刷新
扩展——javescript
扩展——html
扩展——open in browser
4.代码实例
创建工作分区
注意：文件不能创建再js文件夹目录下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!--引入echarts脚本-->
<script src="js/echarts.js"></script>
</head>
<body>
<!---为echarts准备一个具备大小（宽高）的dom-->
<div id="main" style="width: 600px; height: 400px"></div>
<script type="text/javascript">
//基于准备好的dom，初始化echarts图表
var mychart = echarts.init(document.getelementbyid("main"));
//指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'axis',
axispointer: { //设置坐标轴指示器，坐标轴触发有效
type: 'shadow' //设置坐标轴默认为直线，可选为:'line'|'shadow'
}
},
legend: {
data: ['直接访问', '邮件营销', '联盟广告', '视频广告',
'搜索引擎', '百度', '谷歌', '必应', '其他']
},
toolbox: {
show: true,
orient: 'vertical',
x: 'right',
y: 'center',
feature: {
mark: { show: true },
dataview: { show: true, readonly: false },
magictype: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
restore: { show: true },
saveasimage: { show: true }
}
},
calculable: true,
xaxis: [
{
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yaxis: [
{
type: 'value'
}
],
series: [
{
name: '直接访问',
type: 'bar',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '邮件营销',
type: 'bar',
stack: '广告', //设置堆积效果
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'bar',
stack: '广告', //设置堆积效果
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'bar',
stack: '广告', //设置堆积效果
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '搜索引擎',
type: 'bar',
data: [862, 1018, 964, 1026, 1679, 1600, 1570],
markline: {
itemstyle: {
normal: {
linestyle: {
type: 'dashed'
}
}
},
data: [
[{ type: 'min' }, { type: 'max' }]
]
}
},
{
name: '百度',
type: 'bar',
barwidth: 5,
stack: '搜索引擎', //设置堆积效果
data: [620, 732, 701, 734, 1090, 1130, 1120]
},
{
name: '谷歌',
type: 'bar',
stack: '搜索引擎', //设置堆积效果
data: [120, 132, 101, 134, 290, 230, 220]
},
{
name: '必应',
type: 'bar',
stack: '搜索引擎', //设置堆积效果
data: [60, 72, 71, 74, 190, 130, 110]
},
{
name: '其他',
type: 'bar',
stack: '搜索引擎', //设置堆积效果
data: [62, 82, 91, 84, 109, 110, 120]
}
]
};
//使用刚指定的配置项和数据显示图表
mychart.setoption(option);
</script>
</body>
</html>效果
案例二
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!--引入echarts脚本-->
<script src="js/echarts.js"></script>
</head>
<body>
<!---为echarts准备一个具备大小（宽高）的dom-->
<div id="main" style="width: 800px; height: 400px"></div>
<script type="text/javascript">
//基于准备好的dom，初始化echarts图表
var mychart = echarts.init(document.getelementbyid("main"));
//指定图表的配置项和数据
var option = {
title: {
text: '世界人口总量',
subtext: '数据来自网络',
},
tooltip: {
trigger: 'axis',
},
legend: {
data: ['2011年', '2012年'],
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataview: { show: true, readonly: false },
magictype: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveasimage: { show: true },
},
},
calculable: true,
xaxis: [
{
type: 'value', //设置柱状图
boundarygap: [0, 0.01],
},
],
yaxis: [
{
type: 'category',
data: ['a国', 'b国', 'c国', 'd国', 'e国', '世界人口(万)'],
},
],
series: [
{
name: '2011年',
type: 'bar',
data: [18203, 23489, 29034, 104970, 131744, 630230],
},
{
name: '2012年',
type: 'bar',
data: [19325, 23438, 31000, 121594, 134141, 681807],
},
],
};
//使用刚指定的配置项和数据显示图表
mychart.setoption(option);
</script>
</body>
</html>效果
二.eclipse
1.创建工作区 导入js包
2.代码实例
//1案例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!--引入echarts脚本-->
<script src="js/echarts.js"></script>
</head>
<body>
<!---为echarts准备一个具备大小（宽高）的dom-->
<div id="main" style="width: 900px; height: 600px"></div>
<script type="text/javascript">
//基于准备好的dom，初始化echarts图表
var mychart = echarts.init(document.getelementbyid("main"));
//指定图表的配置项和数据
var option = {
title: { //配置标题组件
backgroundcolor: 'yellow', //设置主标题的背景颜色
text: '某大学三大学院的专业分布', //设置主标题的文字
textstyle: { //设置主标题文字样式
color: 'green', //设置主标题文字的颜色
fontfamily: '黑体', //设置主标题文字的字体
fontsize: 28 //设置主标题文字的大小
},
x: 'center' //设置主标题左右居中
},
tooltip: { //配置提示框组件
trigger: 'item', //设置提示框的触发方式
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: { //配置图例组件
orient: 'vertical', //设置图例垂直方向
x: 32, //设置图例的水平方向
y: 74, //设置图例的垂直方向
data: ['1-软件技术', '1-移动应用开发', '2-大数据技术与应用', '2-移动互联应用技术',
'2-云计算技术与应用', '3-投资与理财', '3-财务管理']
},
toolbox: { //配置工具箱组件
show: true, //设置工具箱是否显示
x: 555, //设置工具箱的水平位置
y: 74, //设置工具箱的垂直位置
feature: {
mark: { show: true },
dataview: { show: true, readonly: false },
magictype: {
show: true,
type: ['pie', 'funnel']
},
restore: { show: true },
saveasimage: { show: true }
}
},
calculable: false,
series: [
{
name: '专业名称',
type: 'pie',
selectedmode: 'single',
radius: ['10%', '30%'],
label: {
position: 'inner'
},
labelline: {
show: false
},
data: [
{ value: 1200, name: '计算机学院' },
{ value: 900, name: '大数据学院' },
{ value: 600, name: '财金学院', selected: true } //初始时为选中状态
]
},
{
name: '专业名称',
type: 'pie',
selectedmode: 'single',
radius: ['40%', '55%'],
data: [
{ value: 800, name: '1-软件技术' },
{ value: 400, name: '1-移动应用开发' },
{ value: 500, name: '2-大数据技术与应用' },
{ value: 200, name: '2-移动互联应用技术' },
{ value: 200, name: '2-云计算技术与应用' },
{ value: 400, name: '3-投资与理财' },
{ value: 200, name: '3-财务管理' }
]
}
]
};
//使用刚指定的配置项和数据显示图表
mychart.setoption(option);
</script>
</body>
</html>
结果
anaconda navigator
选择并打开jupyter
发表评论