echarts基本配置
option = {
//darkMode:true,//暗黑模式
//color:'#333',//调色盘颜色列表['#5470c6', '#91cc75']
//backgroundColor:'green',//背景色
//textStyle:{//全局的字体样式。
//color:'#fff'
//},
//animation:true,
title: {//https://echarts.apache.org/zh/option.html#title
show:true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
text: '主标题', //主标题文本，'\n'指定换行
link:'', //主标题文本超链接,默认值true
target: null, //指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
subtext: '副标题', //副标题文本，'\n'指定换行
sublink: '', //副标题文本超链接
subtarget: null, //指定窗口打开副标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
x:'center', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
y: 'top', //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
textAlign: null ,//水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center
backgroundColor: 'rgba(0,0,0,0)', //标题背景颜色，默认'rgba(0,0,0,0)'透明
borderColor: '#ccc', //标题边框颜色,默认'#ccc'
borderWidth: 0, //标题边框线宽，单位px，默认为0（无边框）
padding: 5, //标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
itemGap: 10, //主副标题纵向间隔，单位px，默认为10
textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
fontFamily: 'Arial, Verdana, sans...',
color:'#ccc',
fontSize:"12px",
fontStyle: 'normal',
fontWeight: 'normal',
},
subtextStyle: {//副标题文本样式{"color": "#aaa"}
fontFamily: 'Arial, Verdana, sans...',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal',
},
zlevel: 0, //一级层叠控制。默认0,每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，canvas对象增多会消耗更多的内存和性能，并不建议设置过多的zlevel，大部分情况可以通过二级层叠控制z实现层叠控制。
z: 6, //二级层叠控制，默认6,同一个canvas（相同zlevel）上z越高约靠顶层。
},
tooltip: {
show: true, // 是否显示
trigger: 'axis', // 触发类型 'item'图形触发：散点图，饼图等无类目轴的图表中使用； 'axis'坐标轴触发；'none'：什么都不触发。
axisPointer: { // 坐标轴指示器配置项。
type: 'shadow', // 'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器。
axis: 'auto', // 指示器的坐标轴。
snap: true, // 坐标轴指示器是否自动吸附到点上
},
// showContent: true, //是否显示提示框浮层，默认显示。
// triggerOn: 'mouseover', // 触发时机 'mouseover'鼠标移动时触发。 'click'鼠标点击时触发。 'mousemove|click'同时鼠标移动和点击时触发。
// enterable: false, // 鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
renderMode: 'html', // 浮层的渲染模式，默认以 'html 即额外的 DOM 节点展示 tooltip；
backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色。
borderColor: '#333', // 提示框浮层的边框颜色。
borderWidth: 0, // 提示框浮层的边框宽。
padding: 5, // 提示框浮层内边距，
textStyle: { // 提示框浮层的文本样式。
color: '#fff',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'sans-serif',
fontSize: 14,
},
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);', // 额外附加到浮层的 css 样式
confine: false, // 是否将 tooltip 框限制在图表的区域内。
// formatter: '{b} 的成绩是 {c}'
formatter: function(arg) {
return arg[0].name + '的分数是:' + arg[0].data
}
},
grid: {
/**单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）*/
show:true,//是否显示直角坐标系网格 默认为false
//zlevel:2,//用于 Canvas 分层
top:60,
left: '3%',
right: '4%',
bottom: '3%',
width:'auto',
height:'auto',
/*containLabel 为 false 的时候：
grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是由坐标轴形成的矩形的尺寸和位置。
这比较适用于多个 grid 进行对齐的场景，因为往往多个 grid 对齐的时候，是依据坐标轴来对齐的。
containLabel 为 true 的时候：
grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。
这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。*/
containLabel: true,//grid 区域是否包含坐标轴的刻度标签。
//backgroundColor:'rgb(128, 128, 128)' //此配置项生效的前提是，设置了 show: true。
borderColor:'#ccc',//此配置项生效的前提是，设置了 show: true。
borderWidth:1,//此配置项生效的前提是，设置了 show: true。
shadowColor: 'rgba(255, 255, 255, 1)',
shadowOffsetX:23,//边框的阴影水平方向上的偏移距离
shadowOffsetY:23,//边框的阴影垂直方向上的偏移距离
//shadowBlur 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
shadowBlur: 10,//此配置项生效的前提是，设置了 show: true 以及值不为 tranparent 的背景色 backgroundColor。
},
xAxis: [
{
name:'x轴',
nameLocation:'start',//'start','middle' 或者 'center','end'
nameGap:35,//坐标轴名称与轴线之间的距离。
nameRotate:45,//坐标轴名字旋转，角度值。
interval:true,//是否是反向坐标轴。
/* 坐标轴两边留白策略 boolean,Array，类目轴和非类目轴的设置和表现不一样。
类目轴中 boundaryGap 可以配置为 true 和 false。
默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，
分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比
，在设置 min 和 max 后无效。
boundaryGap: ['20%', '20%']*/
boundaryGap:true,
nameTextStyle:{
color:'#f22',
fontSize:'12px',
fontStyle:'normal',
align:'center',
verticalAlign:'middle',//文字垂直对齐方式，默认自动
//borderDashOffset:33,//设置虚线的偏移量，可搭配 borderType 指定 dash array 实现灵活的虚线效果。
},
show:true,//是否显示 x 轴。
//offset:22,//多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
/*type
'value' 数值轴，适用于连续数据。
'category' 类目轴，适用于离散的类目数据。
'time' 时间轴，适用于连续的时序数据，
'log' 对数轴*/
type: 'category',
position:'bottom',//x轴位置
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
//realtimeSort:true,
axisLine:{//坐标轴轴线相关设置
show:false,//是否显示坐标轴轴线。
onZero:false,//X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。
lineStyle:{
color:'red'
}
},
axisTick:{//坐标轴刻度相关设置。
show:true,//是否显示坐标刻度
alignWithLabel: true,//类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐。
interval:1,//坐标轴刻度的显示间隔，在类目轴中有效。默认同 axisLabel.interval 一样。
inside:false,//坐标轴刻度是否朝内，默认朝外。//同 axisLabel.inside
length:20,//坐标轴刻度的长度。
lineStyle:{
color:'green'
},
},
axisLabel:{//坐标轴刻度标签的相关设置
show:true,
interval:0,//坐标轴刻度标签的显示间隔，在类目轴中有效。可数值可函数
inside:false,//刻度标签是否朝内，默认朝外。
rotate:46,//刻度标签旋转的角度
// margin:3,//刻度标签与轴线之间的距离。
formatter:'{value}.',//刻度标签的内容格式器，支持字符串模板和回调函数两种形式
//formatter，对于时间轴，formatter 的字符串模板支持多种形式
showMinLabel:true,//是否显示最小 tick 的 label。可取值 true, false, null。默认自动判定
showMaxLabel:true,
color:'grey',//支持回调函数
fontSize:14,
},
splitLine:{
show:true,//坐标轴在 grid 区域中的分隔线。默认数值轴显示，类目轴不显示。
interval:1,//可回调函数
lineStyle:{
color:'green'
}
},
minorTick:{//坐标轴次刻度线相关设置。使用时查看文档
},
axisPointer:{//坐标轴指示器配置项。
},
/* 类目数据，在类目轴（type: 'category'）中有效。
如果没有设置 type，但是设置了 axis.data，则认为 type 是 'category'。
如果设置了 type 是 'category'，但没有设置 axis.data，则 axis.data 的内容会自动从 series.data 中获取，这会比较方便。
不过注意，axis.data 指明的是 'category' 轴的取值范围。如果不指定而是从 series.data 中获取，那么只能获取到 series.data 中出现的值。
比如说，假如 series.data 为空时，就什么也获取不到。*/
//data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
data: [{
value: '周一',
// 突出周一
textStyle: {
fontSize: 20,
color: 'red'
}
}, '周二', '周三', '周四', '周五', '周六', '周日'],
zlevel:23,//X 轴所有图形的 zlevel 值。用于 Canvas 分层
z:32,//X 轴组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。z相比zlevel优先级更低，而且不会创建新的 Canvas
}
],
yAxis: [
{
name:'y轴',
type: 'value' ,
min:'dataMin',//可传入number,string,Fun, 'dataMin'为坐标轴刻度最小值
max:function(value){
return value.max + 20
},
scale:true,//是否是脱离 0 值比例;只type: 'value'有效.设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。//在设置 min 和 max 之后该配置项无效。
//splitNumber:5,//坐标轴的分割段数，在类目轴中无效。（只是个预估值）
//interval:100,//强制设置坐标轴分割间隔。配合 min、max 强制设定刻度划分，一般不建议使用。
//minInterval: 130,//自动计算的坐标轴最小间隔大小,只在数值轴或时间轴中（type: 'value' 或 'time'）有效
//maxInterval:3600 * 24 * 1000,//在时间轴（（type: 'time'））可以设置成 3600 * 24 * 1000 保证坐标轴分割刻度最大为一天
minorSplitLine:{//坐标轴在 grid 区域中的次分隔线。次分割线会对齐次刻度线 minorTick
show:false,//默认不显示。
lineStyle:{
color:'red'
}
},
splitLine: {
show: true,
lineStyle: {
color: ['#666'], //网格线颜色
width: 1,
}
},
splitArea:{//坐标轴在 grid 区域中的分隔区域，默认不显示。
show:true,
interval:33,
areaStyle:{
//color:'yellow'
}
},
axisLabel:{////坐标轴刻度标签的相关设置。
margin:30,
textStyle:{
align:'left',
}
}
}
],
tooltip:{//提示框组件.可以设置在全局，坐标，系列，系列的每个数据项中
show:true,
//触发类型 'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
//'axis' 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
//'none' 什么都不触发
trigger:'axis',
showContent:true,//是否显示提示框浮层，默认显示
alwaysShowContent:false,//是否永远显示提示框内容，
//triggerOn:'mousemove',//提示框触发的条件，'mousemove','click','mousemove|click','none'
//showDelay:100,
//hideDelay:120,
enterable:false,//鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
backgroundColor:'rgba(50,50,50,0.7)',
borderColor:'rgba(50,50,50,0.7)',
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
textStyle:{
color:'#fff',
ellipsis:'...'
},
confine:true,//是否将 tooltip 框限制在图表的区域内。当图表外层的 dom 被设置为 'overflow: hidden'，或者移动端窄屏，导致 tooltip 超出外界被截断时，此配置比较有用
/*formatter
模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：
折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
formatter: '{b0}: {c0}<br />{b1}: {c1}'*/
formatter:'{b0}: {c0}<br />{b1}: {c1}',//使用回调函数可查看文档
},
dataset:{
source:[
[],[]]
},
legend:{//图例组件。
type:'plain',//'plain'：普通图例,'scroll'：可滚动翻页的图例,当图例数量较多时可以使用
left:3300,
padding:33,
itemGap:333,
},
series: [//此处只看series-bar柱状图
{
name: '直接访问',//用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
//colorBy:'data',//'series'：按照系列分配调色盘中的颜色，同一系列中的所有数据都是用相同的颜色；
//'data'：按照数据项分配调色盘中的颜色，每个数据项都使用不同的颜色。
type: 'bar',
legendHoverLink:true,//是否启用图例 hover 时的联动高亮。
showBackground:'grey',//是否显示柱条的背景色
backgroundStyle:{
},
label:{//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
show:true,
distance:2,//距离图形元素的距离
rotate:33,
offset:[22,33],
/*formatter 字符串模板 ,可用回调
模板变量有：
{a}：系列名。
{b}：数据名。
{c}：数据值。
{@xxx}：数据中名为 'xxx' 的维度的值，如 {@product} 表示名为 'product' 的维度的值。
{@[n]}：数据中维度 n 的值，如 {@[3]} 表示维度 3 的值，从 0 开始计数。*/
formatter:'{a}:{b},{c},{@xxx},{@[n]}',
color:'#ff2',
itemStyle:{
color:'#fff',
borderWidth:33,
}
},
barWidth: '60%',
data: [120, 532, 200, 334, 390, 330, 220,210, 52, 200, 334,]
}
]
};
import { Component, useEffect } from 'react'
import { View, Text } from '@tarojs/components'
import * as echarts from 'echarts';
var option;
option = {
backgroundColor: '#FFF0F5',
title: {
text: '折线图',
subtext: '模拟数据',
x: 'center'
},
legend: {
// orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
orient: 'horizontal',
// x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
x: 'center',
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
y: 'bottom',
data: ['预期','实际','假设']
},
// 图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
grid: {
top: '16%', // 等价于 y: '16%'
left: '3%',
right: '8%',
bottom: '3%',
containLabel: true
},
// 提示框
tooltip: {
trigger: 'axis'
},
//工具框，可以选择
toolbox: {
feature: {
saveAsImage: {} //下载工具
}
},
xAxis: {
name: '周几',
type: 'category',
axisLine: {
lineStyle: {
// 设置x轴颜色
color: '#912CEE'
}
},
// 设置X轴数据旋转倾斜
axisLabel: {
rotate: 30, // 旋转角度
interval: 0 //设置X轴数据间隔几个显示一个，为0表示都显示
},
// boundaryGap值为false的时候，折线第一个点在y轴上
boundaryGap: true,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
name: '数值',
type: 'value',
//min:0, // 设置y轴刻度的最小值
//max:1800, // 设置y轴刻度的最大值
splitNumber:9, // 设置y轴刻度间隔个数
axisLine: {
lineStyle: {
// 设置y轴颜色
color: '#87CEFA'
}
}
},
series: [
{
name: '预期',
data: [820, 932, 301, 1434, 1290, 1330, 1320],
type: 'line',
// 设置小圆点消失
// 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
symbol: 'none',
// 设置折线弧度，取值：0-1之间
smooth: 0.5,
},
{
name: '实际',
data: [620, 732, 941, 834, 1690, 1030, 920],
type: 'line',
// 设置折线上圆点大小
symbolSize:8,
itemStyle:{
normal:{
// 拐点上显示数值
label : {
show: true
},
borderColor:'red', // 拐点边框颜色
lineStyle:{
width:5, // 设置线宽
type:'dotted' //'dotted'虚线 'solid'实线
}
}
}
},
{
name: '假设',
data: [120, 232, 541, 134, 290, 130, 120],
type: 'line',
// 设置折线上圆点大小
symbolSize:10,
// 设置拐点为实心圆
symbol:'circle',
itemStyle: {
normal: {
// 拐点上显示数值
label : {
show: true
},
lineStyle:{
// 使用rgba设置折线透明度为0，可以视觉上隐藏折线
color: 'rgba(0,0,0,0)'
}
}
}
}
],
color: ['#00EE00', '#FF9F7F','#FFD700']
};
export default function Index () {
useEffect(()=>{
let chartDom = echarts.getInstanceByDom(document.getElementById('line'));
if (chartDom == undefined) {
chartDom = echarts.init(document.getElementById('line'), null,{ renderer: 'svg' });
}
option && chartDom.setOption(option)
return ()=>{
echarts.dispose();
}
},[])
return (
<View className='index'>
<div id="line" style={{width:400,height:500}}></div>
</View>
)
}
1
import { Component, useEffect } from 'react'
import { View, Text } from '@tarojs/components'
import * as echarts from 'echarts';
var option;
option = { title: {
text: '一天用电量分布',
subtext: '纯属虚构'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
toolbox: {
show: true,
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} W'
},
axisPointer: {
snap: true
}
},
visualMap: {
show: false,
dimension: 0,
pieces: [{
lte: 6,
color: 'green'
}, {
gt: 6,
lte: 8,
color: 'red'
}, {
gt: 8,
lte: 14,
color: 'green'
}, {
gt: 14,
lte: 17,
color: 'red'
}, {
gt: 17,
color: 'green'
}]
},
series: [
{
name: '用电量',
type: 'line',
smooth: true,
smooth: 0.5,
symbol: 'none',
data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
markArea: {//柱状图
itemStyle: {
color: 'rgba(255, 173, 177, 0.4)'
},
data: [ [{
name: '早高峰',
xAxis: '07:30'
}, {
xAxis: '10:00'
}], [{
name: '晚高峰',
xAxis: '17:30'
}, {
xAxis: '21:15'
}] ]
}
}
]
};
export default function Index () {
useEffect(()=>{
let chartDom = echarts.getInstanceByDom(document.getElementById('line'));
if (chartDom == undefined) {
chartDom = echarts.init(document.getElementById('line'), null,{ renderer: 'svg' });
}
option && chartDom.setOption(option)
return ()=>{
echarts.dispose();
}
},[])
return (
<View className='index'>
<div id="line" style={{width:400,height:500}}></div>
</View>
)
}
2
import { Component, useEffect } from 'react'
import { View, Text } from '@tarojs/components'
import * as echarts from 'echarts';
var option;
option = {
xAxis: {
type: 'category',
boundaryGap: false
},
yAxis: {
type: 'value',
boundaryGap: [0, '30%']
},
visualMap: {
type: 'piecewise',
show: false,
dimension: 0,
seriesIndex: 0,
pieces: [{
gt: 1,
lt: 3,
color: 'rgba(0, 0, 180, 0.4)'
}, {
gt: 5,
lt: 7,
color: 'rgba(0, 0, 180, 0.4)'
}]
},
series: [
{
type: 'line',
smooth: 0.6,
symbol: 'none',
lineStyle: {
color: '#5470C6',
width: 5
},
markLine: {
/**起点标记的图形'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' */
symbol: ['none', 'none'],
label: {show: false},
data: [
{xAxis: 1},
{xAxis: 3},
{xAxis: 5},
{xAxis: 7}
]
},
areaStyle: {},
data: [
['2019-10-10', 200],
['2019-10-11', 560],
['2019-10-12', 750],
['2019-10-13', 580],
['2019-10-14', 250],
['2019-10-15', 300],
['2019-10-16', 450],
['2019-10-17', 300],
['2019-10-18', 100]
]
}
]
};
export default function Index () {
useEffect(()=>{
let chartDom = echarts.getInstanceByDom(document.getElementById('line'));
if (chartDom == undefined) {
chartDom = echarts.init(document.getElementById('line'), null,{ renderer: 'svg' });
}
option && chartDom.setOption(option)
return ()=>{
echarts.dispose();
}
},[])
return (
<View className='index'>
<div id="line" style={{width:400,height:500}}></div>
</View>
)
}
