echart高级使用_EChart 使用简介

一、导入第三方包

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

五、常用图表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 + ' :
'

+ params.value[0] + ','

+ params.value[1] + ' kW ';

} else {

return params.seriesName + ' :
'

+ 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