目录
下载网址: https://www.bootcdn.cn/echarts/
目录
下载网址: https://www.bootcdn.cn/echarts/
(3)legend:图例组件展现了不同系列的标记(symbol),颜色和名字
(4)xAxis:x轴配置 直角坐标系 grid 中的 x 轴
(5)yAxis:y轴配置 y轴默认不写数据 自动分配y轴的值
(3)legend:图例组件展现了不同系列的标记(symbol),颜色和名字
(4)xAxis:x轴配置 直角坐标系 grid 中的 x 轴
(5)yAxis:y轴配置 y轴默认不写数据 自动分配y轴的值
tooltip下载4.8版本,后缀为echarts.min.js,
下载网址: https://www.bootcdn.cn/echarts/
使用步骤:
①基于准备好的dom,初始化echarts实例 echarts.init()
②配置项
③ 渲染显示setOption()-----使用刚指定的配置项和数据显示图表。
例子如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.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 = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
1.基础配置修改:
(1)title:标题组件,包含主标题和副标题
let option={
title: { //标题组件,包含主标题和副标题
show: false, //是否显示标题组件
text: '风险交易数据检测', //主标题文本,支持使用 \n 换行
textStyle: {
// color:'#fff',//主标题文字的颜色
fontSize: 16, //字体大小
},
link: 'https://www.baidu.com', //主标题文本超链接
target: 'blank', //指定窗口打开主标题超链接
subtext: '副标题',
sublink: '',
subtarget: '',
subtextStyle: { //副标题的样式
},
// textAlign:'center',//不常用 主标题和副标题 组件对齐方式(容器左边参考)
padding: 10, //标题与边框距离
itemGap: 10, //主副标题之间的间距
left: 'left', //title 组件离容器左侧的距离
},
}
(2) tooltip:提示框组件
let option={
tooltip: { //提示框组件
// trigger: 'axis', //触发类型 axis柱状图和折线图
// formatter:'',//提示框浮层内容格式器,支持字符串模板和回调函数两种形式
//1.字符串模板(推荐) {a}(系列名称),{b}(类目值),{c}(数值)
// formatter:'{a0}-{b0}-{c0}<br/>{a1}-{b1}-{c1}'
},
}
(3)legend:图例组件展现了不同系列的标记(symbol),颜色和名字
let option={
legend: { //图例组件展现了不同系列的标记(symbol),颜色和名字
left: 'left', //图例组件离容器左侧的距离
textStyle: {
color: '#999'
},
orient: 'vertical', //图例列表的布局朝向 系列的布局水平和垂直
// icon:"diamond",//图例项的 icon
//可以通过 'image://url' 设置为图片,其中 URL 为图片的链接
icon: 'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',
data: ['销量', { //系列内容名称
name: '利润',
// 强制设置图形为圆。
icon: 'circle',
// 设置文本为红色
textStyle: {
color: 'red'
}
}],
},
}
(4)xAxis:x轴配置 直角坐标系 grid 中的 x 轴
let option={
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: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
}
(5)yAxis:y轴配置 y轴默认不写数据 自动分配y轴的值
let option={
yAxis: { //y轴配置 y轴默认不写数据 自动分配y轴的值
axisLine: { //坐标轴轴线相关设置
show: false,
lineStyle: {
color: 'green'
}
},
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
type: 'dashed', //虚线
}
}
},
}
(6)series
let option={
series: [{ //[{},{}]
name: '销量',
type: 'bar', //bar柱状图 line折线
// showBackground:true,//是否显示柱条的背景色
// backgroundStyle:{},//修改背景样式
label: { //图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等
// show: true, //是否显示标签
fontSize: 14,
},
itemStyle: { //图形样式
// color:'#888',//柱条颜色
// borderRadius:20,
barBorderRadius: [20, 20, 0, 0], //圆角 柱条
//渐变颜色--柱条
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#00B9EE' // 0% 处的颜色
}, {
offset: 1,
color: '#0770EE' // 100% 处的颜色
}],
global: false // 缺省为 false
},
opacity:0.8
},
emphasis: { //高亮的图形样式和标签样式
label: {
color: 'red',
show:true
},
itemStyle: {
color: 'pink'
}
},
barWidth: '30', //柱条的宽度,不设时自适应
data: [50, 20, 36, 10, 10, 20]
}]
}
2.折线图配置
grid: { //直角坐标系内绘图网格
left: 0, //grid 组件离容器左侧的距离
bottom: 0,
right: 30,
containLabel: true, //grid 区域是否包含坐标轴的刻度标签
},
xAxis: {
boundaryGap: false, //留白策略 x轴的位置起点从0开始
}
series: [{
name: '销量',
type: 'line',
label: { //图形上的文本标签,可用于说明图形的一些数据信息
// show: true, //
color: 'red', //文字的颜色
},
endLabel: {
show: true, //是否显示标签
},
itemStyle: { //折线拐点标志的样式
color: 'green',
// borderColor:'red',//图形的描边颜色
// borderType:'solid',
borderWidth: 0, //描边线宽。为 0 时无描边
opacity :0,
},
lineStyle: { //线条样式
color: '#333'
},
areaStyle: { //区域填充样式。设置后显示成区域面积图
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'red' // 0% 处的颜色
}, {
offset: 1,
color: 'blue' // 100% 处的颜色
}],
global: false // 缺省为 false
},
opacity:0.5
},
smooth:true,//是否平滑曲线显示
data: [5, 40, 16, 30, 10, 20]
}]
3.地图
<!--
地图的使用步骤:
1.引入echarts.js 再引入china.js 文件
2.创建容器 js获取初始化 设置显示地图
3.注意地图数据: 柱状图-折线图-(数组) 饼状图和地图-(数组对象[{},{}])
-->
<div id="china_chart" style="width: 1000px;height:560px;border:1px solid #999;"></div>
<script charset="utf-8">
var china_chart = echarts.init(document.getElementById('china_chart'));
//数据纯属虚构 [{城市:数据,...}]
var data = [
{
name: '江苏',
value: 1
},
{
name: '北京',
value: 0
},
{
name: '上海',
value: 68
},
{
name: '重庆',
value: 23
},
{
name: '河北',
value: 34
},
{
name: '河南',
value: 32
},
{
name: '云南',
value: 16
},
{
name: '辽宁',
value: 43
},
{
name: '黑龙江',
value: 81
},
{
name: '湖南',
value: 24
},
{
name: '安徽',
value: 33
},
{
name: '山东',
value: 54
},
{
name: '新疆',
value: 18
},
{
name: '浙江',
value: 44
},
{
name: '江西',
value: 22
},
{
name: '湖北',
value: 21
},
{
name: '广西',
value: 30
},
{
name: '甘肃',
value: 12
},
{
name: '山西',
value: 32
},
{
name: '内蒙古',
value: 35
},
{
name: '陕西',
value: 25
},
{
name: '吉林',
value: 45
},
{
name: '福建',
value: 28
},
{
name: '贵州',
value: 18
},
{
name: '广东',
value: 37
},
{
name: '青海',
value: 6
},
{
name: '西藏',
value: 4
},
{
name: '四川',
value: 33
},
{
name: '宁夏',
value: 8
},
{
name: '海南',
value: 19
},
{
name: '台湾',
value: 1
},
{
name: '香港',
value: 1
},
{
name: '澳门',
value: 1
}
];
var option = {
tooltip: {//悬浮弹框 1.字符串格式 2.函数回调
//函数 params形参 参数表示是data里面的每一项数据 {}对象
formatter: function(aa) {
//data series里面数据 =[{name:'',value:''},{}]
return aa.name + ':' + aa.value;
},
// formatter:'{a}-{b}:{c}',
},
visualMap: [{//visualMap 是视觉映射组件,用于进行『视觉编码 visualMap:图注样式定制,其中包括color范围,文字提示
type: 'piecewise',//分段型视觉映射组件
// 自定义『分段式视觉映射组件 的每一段的范围,以及每一段的文字,以及每一段的特别的样式
pieces:[
{min: 1000, label: '>=1000',color: '#E64546'},
{min: 100, max: 999, label: '100-999',color: '#F57567'},
{min: 10, max: 99, label: '10-99',color: '#FF9985'},
{min: 1, max: 9, label: '1-9',color: '#FFE5DB'},
{max: 1, label: '0',color: '#fff'},
]
}],
geo: {//地理坐标系组件 geo:定义地图为china 常用zoom
map: 'china',//地图类型。ECharts 3 中因为地图精度的提高,不再内置地图数据增大代码体积 map/js/china.js
zoom:1,//视角缩放比例
label:{//地图对策城市名称显示
show:true
},
emphasis:{//高亮
label: {//地图的标签名字
show: true
},
itemStyle: {//区域样式 hover样式
areaColor: 'pink'
}
}
},
series: [
{
name: '中国地图',//{a}{b}{c}
type: 'map',//地图map
geoIndex: 0, //映射visualMap 颜色配置
data: data
}]
};
china_chart.setOption(option);
</script>