您的位置：首页 > Web前端 > JavaScript

js中Echarts.js插件的使用

2020-07-29 10:32 32 查看

一：echarts.js下载
浏览器地址栏键入echrts.js下载地址，进入下载链接后点击在线定制，根据需求选择相应的组件进行下载。
二：在html页面通过script标签导入，

<script src="js/echarts.mim.js"></script>

三：在body标签内部为ECharts准备一个具备大小（宽高）的Dom
四：基于准备好的Dom，初始化echarts实例
五：通过setOption方法生成（显示）图表
实例如下（包含一些具体的属性用法）：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Echarts的基本使用</title>
<style>
.charts {
width: 600px;
height: 500px;
border: 1px solid red;
margin: 30px auto;
}
</style>
</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div class="charts"></div>
</body>
<script src="echarts.min.js"></script>
<script>
// 基于准备好的Dom，初始化echarts实例
var myChart = echarts.init(document.querySelector(".charts"));
// 设置属性
var options = {
// 定义标题
title: {
show: true, //设置标题是否显示 默认值为true
text: "班级成绩表", //主标题文本，支持使用\n换行
link: "https://echarts.apache.org",//设置主标题文本超链接
target: "self", //主标题打开新链接的方式 默认为blank  'self':当前窗口打开 'blank': 新窗口打开
padding: 5, //设置主标题内边距  接受数组分别设定上右下左边距
backgroundColor: "pink",
x: "left",//设置主标题水平位置，默认为left,可选:"center","left","right",number:单位px
y: 'top',//设置主标题垂直位置，默认为top，可选:"top","bottom","center",number
textStyle: {  //设置主标题的样式
// fontSize: 10,
// fontStyle: "oblique", //文字风格  可选:'normal' 'italic' 'oblique'
fontFamily: "kaiti", //字体
// color: "white", //颜色
// fontWeight: "bold", //文字粗细 'normal' 'bold' 'bolder'  'lighter'
// lineHeight: 30, //行高
width: 100, //文字块的宽度。一般不用指定，不指定则自动是文字的宽度。
height: 100, //文字块的高度。一般不用指定，不指定则自动是文字的高度。
// textBorderColor: "rgba(213, 29, 29, 1)", //文字本身的描边颜色
// textBorderColor: "rgba(213, 29, 29, 1)", //文字本身的阴影颜色
// textShadowBlur: 4,  //文字本身的阴影长度
// textShadowOffsetX: 4, //文字本身的阴影 X 偏移
// textShadowOffsetY: 4, //文字本身的阴影 Y 偏移
rich: {
// 可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果
}
},
subtext: "chengji", //设置副标题文本
// sublink: "https://echarts.apache.org", //副标题文本超链接
// subtarget: "blank",//副标题打开超链接的方式
itemGap: 10,//设置主副标题之间的间距，单位px
subtextStyle: { //设置副标题的样式
fontSize: 15,
fontFamily: "kaiti",
fontWeight: 100,
// align: "center" //文字水平对齐方式，默认自动
// verticalAlign: "top",//文字垂直对齐方式,默认自动
},
textAlign: "auto", //整体（包括 text 和 subtext）的垂直对齐
triggerEvent: true,
left: 20, //title 组件离容器左侧的距离
top: 20,
// top: 10,  right: , bottom:,
},
legend: { //设置图例样式
top: 20,
right: 10,
// left:,
// bottom:,
// padding: 5,//图例内边距，单位px
itemGap: 5, //图例每项之间的间隔
orient: "vertical", //图例列表的布局朝向 horizontal
textStyle: { //图例的公用文本样式

},
data: ["1班成绩", "2班成绩", "全校平均"],
selected: { '全校平均': false } // 图例选中状态表 加载图标时不让legend.data中某一个字段不显示，点击时才显示
},
grid: { //直角坐标系内绘图网格
show: true,
width: 450,//宽
height: 350, //高
left: 30,
bottom: 50,
// top:
// right:
backgroundColor: "yellow",
// borderColor: "red",
},
// x轴设置
xAxis: {
// show: false,
data: ["不及格", "及格", "中等", "良好", "优秀"],
min: 0,
// max: 60,
},
yAxis: {
},
series: [
{
name: "1班成绩", //name = legend.data时字段图标才能正常显示
type: "bar", //图表类型 柱状
data: [20, 10, 25, 15, 10],
animation: true,
},
{
name: "2班成绩", //name = legend.data时图标才能正常显示
type: "bar", //图表类型 柱状
data: [5, 10, 15, 30, 20]
},
{
name: "全校平均",
type: "line", //折线
data: [8, 12, 20, 15, 25]
}
]
};
// 通过setOption方法生成（显示）图表
myChart.setOption(options);
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航