<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/echarts.js"></script>
<style>
#main {
width: 600px;
height: 300px;
background-color: #212948;
}
</style>
</head>
<body>
<!-- 在绘图前我们需要为ECharts准备一个具备高宽的DOM容器 -->
<div id="main"></div>
<script>
// 1、基于准备好的dom，初始化echarts实例 echarts.init()
var myChart = echarts.init(document.getElementById("main"));
// 2、配置项
var option = {
title: { // 标题组件，包含主标题和副标题
show: true, // 是否显示标题组件
text: '风险交易数据监测', // 主标题文本，支持使用 \n 换行
textStyle: {
color: "#fff", // 主标题文字的颜色
fontSize: 16, // 主标题文字的字体大小
},
link: 'https://www.baidu.com', // 主标题文本超链接。
target: 'blank', // 指定窗口打开主标题超链接。 'self' 当前窗口打开 'blank' 新窗口打开(默认)
subtext: '副标题',
subtarget: "",
subtextStyle: { // 副标题的样式
},
// textAlign: "center", // 不常用 主标题和副标题组件对齐方式（容器左边参考）
padding: 10, // 标题与边框的距离
itemGap: 10, // 主副标题之间的间距
left: "left", // title 组件离容器左侧的距离
},
tooltip: { // 提示框组件
trigger: 'axis', // 触发类型 axis 柱状图和折线图
// formatter: '', // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
// 1. 字符串模板（推荐） {a}（系列名称）,{b}（类目值）,{c}（数值）
// formatter: '{a0}-{b0}-{c0}--{a1}-{b1}-{c1}',
// formatter: '{a0}-{b0}-{c0}<br/>{a1}-{b1}-{c1}',
},
legend: { // 图例组件展现了不同系列的标记(symbol)，颜色和名字
textStyle: {
color: "#999"
},
// icon: "diamond", // 图例项的 icon
// 可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI
icon: 'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',
data: ['销量', { // 系列内容名称
name: '利润',
// 强制设置图形为圆。
icon: 'circle',
// 设置文本为红色
textStyle: {
color: 'red'
}
}],
orient: "vertical", // 图例列表的布局朝向 'horizontal'(默认) 'vertical'
},
xAxis: { // x轴配置 直角坐标系 grid 中的 x 轴
axisLine: { // 坐标轴轴线相关设置
show: false,
lineStyle: {
color: "blue", // 坐标轴线线的颜色 线的颜色修改后 刻度线和label都修改样式
width: 1, // 线宽度
// type: '',
},
},
axisTick: { // 坐标轴刻度相关设置
show: false, // 是否显示坐标轴刻度
alignWithLabel: true, // 中间位置显示线
},
axisLabel: { // 坐标轴刻度标签的相关设置
color: "green", // 刻度标签文字的颜色
},
splitLine: { // 坐标轴在 grid 区域中的分隔线
show: false, // 是否显示分隔线。默认数值轴显示，类目轴不显示
},
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
},
yAxis: { // y轴配置 y轴默认不写数据 自动分配y轴的值
axisLine: {
show: false,
lineStyle: {
color: "green",
}
},
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
type: 'dashed', // 虚线
}
}
},
series: [ // [{},{}]
{
name: '销量',
type: 'bar', // bar 柱状图 line 折线图
data: [50, 20, 36, 10, 10, 20]
},
{
name: '利润',
type: 'bar', // bar 柱状图 line 折线图
data: [100, 10, 56, 40, 20, 10]
},
]
};
// 3、渲染显示
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
ECharts.zip （10个子文件） 
ECharts 
05-柱状图.html 1KB 07-饼图.html 2KB 02-基础配置修改.html 2KB 08-饼图数据解析获取.html 2KB 01-5分钟上手.html 1KB 03-修改系列和弹框配置.html 4KB 04-x-y-轴配置.html 5KB 06-折线图（toolbox）.html 3KB js 
echarts.js 3.09MB jquery.min.js 94KB
评论0