标签：name show color value 图表 组件 工具 data Echarts
目录
下载网址： 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>
标签：name,show,color,value,图表,组件,工具,data,Echarts 来源： https://blog.csdn.net/m0_46512929/article/details/117509157
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。