一、Echarts配置项详解
(一)标题组件title
1.text：主标题文本
2.subtext：副标题文本
3.left：标题的位置，可选：'left', 'right', 'center'
(二)提示框组件tooltip
1.trigger：触发类型：坐标轴触发，可选：'axis' 坐标轴触发，'item' 数据项触发
2.axisPointer{ // 坐标轴指示器配置项
type: 'shadow' // 指示器类型：'shadow' 阴影，可选：'line' 直线，'shadow' 阴影
}
(三)图例组件legend
1.data:[ ] 图例的数据数组
2.top:'bottom' // 图例的位置，可选：'top', 'bottom', 'left', 'right'
(四)工具箱toolbox
1.show:true 是否显示工具箱
2.feature: { //各工具配置项
mark: {show: true},
dataView: {show: true, readOnly: false}, // 数据视图工具，是否只读
magicType: {show: true, type: ['line', 'bar', 'stack']}, // 图表类型切换
restore: {show: true}, // 配置项还原工具
saveAsImage: {show: true} // 保存为图片工具
}
(五)直角坐标系内绘图网格grid
1.left:’3%’ // 网格左侧的距离
2.right：’3%’ //网格右侧的距离
3.bottom:’3%’ //网格底部的距离
4.containLabel: true // 网格区域是否包含坐标轴的刻度标签
(六)X轴配置xAxis
1.type:'category', // 类型：'category' 类目轴，'value' 数值轴
2.data:[ ], //类目数据
3.axisTick:{ //刻度线配置
alignWithLabel: true // 刻度线和标签是否对齐
}
(七)Y轴配置yAxis
1.type:value, // 类型：'category' 类目轴，'value' 数值轴
(八)系列列表serise
1.name: 系列名称,
2.type: ’bar’, // 类型：'bar' 柱状图，'line' 线图，'pie' 饼图等
3.barWidth: ‘20%’ //柱条宽度
4.data: [10, 52, 200, 334, 390] // 系列中的数据值
二、配置示例代码
(一)折线图示例
1.示例代码
import * as echarts from 'echarts'; var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; option = { title: { text: 'Stacked Line' }, tooltip: { trigger: 'axis' }, legend: { data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { name: 'Email', type: 'line', stack: 'Total', data: [120, 132, 101, 134, 90, 230, 210] }, { name: 'Union Ads', type: 'line', stack: 'Total', data: [220, 182, 191, 234, 290, 330, 310] }, { name: 'Video Ads', type: 'line', stack: 'Total', data: [150, 232, 201, 154, 190, 330, 410] }, { name: 'Direct', type: 'line', stack: 'Total', data: [320, 332, 301, 334, 390, 330, 320] }, { name: 'Search Engine', type: 'line', stack: 'Total', data: [820, 932, 901, 934, 1290, 1330, 1320] } ] }; option && myChart.setOption(option);
2.实现效果
(二)柱状图示例
1.示例代码
import * as echarts from 'echarts'; var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; option = { title: { text: 'World Population' }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: {}, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'value', boundaryGap: [0, 0.01] }, yAxis: { type: 'category', data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'] }, series: [ { name: '2011', type: 'bar', data: [18203, 23489, 29034, 104970, 131744, 630230] }, { name: '2012', type: 'bar', data: [19325, 23438, 31000, 121594, 134141, 681807] } ] }; option && myChart.setOption(option);
2.实现效果
(三)饼图示例
1.示例代码
import * as echarts from 'echarts'; var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; option = { legend: { top: 'bottom' }, toolbox: { show: true, feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, restore: { show: true }, saveAsImage: { show: true } } }, series: [ { name: 'Nightingale Chart', type: 'pie', radius: [50, 250], center: ['50%', '50%'], roseType: 'area', itemStyle: { borderRadius: 8 }, data: [ { value: 40, name: 'rose 1' }, { value: 38, name: 'rose 2' }, { value: 32, name: 'rose 3' }, { value: 30, name: 'rose 4' }, { value: 28, name: 'rose 5' }, { value: 26, name: 'rose 6' }, { value: 22, name: 'rose 7' }, { value: 18, name: 'rose 8' } ] } ] }; option && myChart.setOption(option);
2.实现效果
好了，本文就到这里吧，点个关注再走嘛~
