Echarts官方文档：
https://echarts.baidu.com/echarts2/doc/doc.html
一、导入第三方包
npm install native-echarts --save
二、导入Echarts组件
import Echarts from 'native-echarts
三、定义option
echartsOption.png
option = {
//设置图表边距
grid:{
left:0,
right:15,
top:15,
bottom:15,
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
//图表展示样式切换按钮
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
}
},
//头部标题
legend: {
data:['降水量','平均温度']
},
xAxis: [
{
type: 'category',
//设置x轴数据
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
axisPointer: {
type: 'line'//设置x轴指示线样式
}
}
],
yAxis: [
{
type: 'value',
name: '水量',
splitLine: {show: false},//去除网格线
min: 0,
max: 250,//设置y轴坐标最大值
interval: 50,
axisLabel: {
formatter: '{value} ml'
}
}
],
series: [
{
name:'降水量',
type:'bar',
//设置Y轴数据
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name:'平均温度',
//type指定图表样式'line'（折线图） | 'bar'（柱状图） | 'scatter'（散点图） | 'k'（K线图）
// 'pie'（饼图） | 'radar'（雷达图） | 'chord'（和弦图） | 'force'（力导向布局图） | 'map'（地图）
type:'line',
yAxisIndex: 1,
//设置Y轴数据
data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
};
四、绑定option
<Echarts option={option} height={250} width={DefaultSize.ScreenWidth} />
五、常用图表option
1.柱状图
option = {
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'line' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接访问',
type:'bar',
barWidth: '60%',
data:[10, 52, 200, 334, 390, 330, 220]
}
]
};
2.折线图
option = {
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value'
},
series: [
{
name:'邮件营销',
type:'line',
stack: '总量',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'line',
stack: '总量',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'视频广告',
type:'line',
stack: '总量',
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'直接访问',
type:'line',
stack: '总量',
data:[320, 332, 301, 334, 390, 330, 320]
},
{
name:'搜索引擎',
type:'line',
stack: '总量',
data:[820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
3.折柱混合图
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
//图表展示样式切换按钮
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
}
},
//头部标题
legend: {
data:['降水量','平均温度']
},
xAxis: [
{
type: 'category',
//设置x轴数据
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
axisPointer: {
type: 'line'//设置x轴指示线样式
}
}
],
yAxis: [
{
type: 'value',
name: '水量',
splitLine: {show: false},//去除网格线
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '温度',
splitLine: {show: false},//去除网格线
min: 0,
max: 30,
interval: 5,
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name:'降水量',
type:'bar',
//设置Y轴数据
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name:'平均温度',
//type指定图表样式'line'（折线图） | 'bar'（柱状图） | 'scatter'（散点图） | 'k'（K线图）
// 'pie'（饼图） | 'radar'（雷达图） | 'chord'（和弦图） | 'force'（力导向布局图） | 'map'（地图）
type:'line',
yAxisIndex: 1,
//设置Y轴数据
data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
};
4.散点图
let bubbleOption = {
grid:{
left:0,
right:15,
top:15,
bottom:15,
containLabel: true
},
color: ['#0ece6d'],
title: {
show:false
//text: '男性女性身高体重分布',
//subtext: '抽样调查来自: Heinz 2003'
},
tooltip: {
trigger: 'axis',
showDelay: 0,
formatter: function (params) {
if (params.value.length > 1) {
return params.seriesName + ' :<br/>'
+ params.value[0] + ','
+ params.value[1] + ' kW ';
} else {
return params.seriesName + ' :<br/>'
+ params.name + ' : '
+ params.value + 'kW ';
}
},
axisPointer: {
show: true,
type: 'cross',
lineStyle: {
type: 'dashed',
width: 1
}
}
},
//legend: {
// data:['女性','男性']
//},
//toolbox: {
// show : true,
// feature : {
// mark : {show: true},
// dataZoom : {show: true},
// dataView : {show: true, readOnly: false},
// restore : {show: true},
// saveAsImage : {show: true}
// }
//},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: date,
scale:false,
splitLine: {show: false},//去除网格线
axisLabel: {
formatter: '{value}'
}
}
],
yAxis: [
{
show:false,
type: 'value',
scale: false,
splitLine: {show: false},//去除网格线
// boundaryGap: [0, '100%'],
axisLabel: {
formatter: '{value}'
}
}
],
series: [
{
name: '峰值',
type: 'scatter',
data: data,
// data: [['00:15', 100], ['00:15', 200], ['00:15', 300], ['00:45', 100], ['01:15', 100]],
// markPoint: {
// data: [
// {type: 'max', name: '最大值'},
// {type: 'min', name: '最小值'}
// ]
// },
//markLine : {
// data : [
// {type : 'average', name: '平均值'}
// ]
//}
}
]
};
5.堆叠柱状图
option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'line' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'邮件营销',
type:'bar',
stack: '广告',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'bar',
stack: '广告',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'视频广告',
type:'bar',
stack: '广告',
data:[150, 232, 201, 154, 190, 330, 410]
},
]
};
堆叠柱状.png
网友评论