版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhai_15733218875/article/details/78158825
之前从未接触过echarts插件，直到项目里面需要大量使用到各种图表，以下总结是本人在项目中使用到的一些基本配置，虽然网上有大量的相关教程，但是自己重新总结归纳一下也是好的。如若有错误欢迎大家指正！好啦，直接进入正题。
为了使代码简洁，我可能会删掉一些不必要的重复代码，所以可能会图文不符
折线图
var eCharts = echarts.init(document.getElementById('e-charts'));
// 指定图表的配置项和数据
var colors = ['#2062e6','yellow',"orange"]; // 这里是图表线条的颜色
var option = { // 配置项
tooltip: {
trigger: 'axis',
backgroundColor: '#fff',
borderWidth: 1, // 默认值，提示边框线宽，单位px，默认为0（无边框）
borderColor: '#eee',
borderRadius: 6, // 默认值，提示边框圆角，单位px，默认为4
padding: 10,
textStyle: {
color: '#999',
fontSize: 12
},
axisPointer: {
type: 'line', // cross时为十字虚线 也可以为shadow
lineStyle: {
color: '#bbb'
},
shadowStyle : { // 阴影指示器样式设置
width: 'auto', // 阴影大小
color: 'rgba(150,150,150,0.3)' // 阴影颜色
}
}
},
legend: { // 图例
orent: 'vertical', // 如图：现在是横排 如果竖排 改成 vertical
x: 'left', // 左对齐
data: [
{
name: '我的', // 此处的name要与下面的series里面的name一一对应，图例才能正常显示出来
// icon: 'rect' // 为图例的标
},
{
name: '同行同层平均'
}
]
},
grid: {
bottom: '24%',
left: '2%',
right: '2%',
top: '22%'
},
axisLabel: {
show: false
},
xAxis: { // x坐标轴
type: 'category',
data: ["08-12","08-13","08-14","08-15"],
axisLine:{ //坐标轴颜色
lineStyle:{
color:'#bbb'
}
},
axisLine: true, // 控制 坐标轴显示或隐藏
splitLine: { //删掉参考线
show: false
},
axisTick: { // 坐标轴上的小标识
show: false
},
axisLabel: { //刻度值
textStyle: {
color: '#bbb'
},
interval: 2 // 如图：x轴上的数据时每隔2个一显示
},
// axisLabel : {interval: 1},
},
yAxis: {
type: 'value',
// boundaryGap: [0, 0.5], // 这个是控制y轴数值的范围
axisLine: false, // 控制 坐标轴显示或隐藏
splitLine: {
show: true,
lineStyle: {
color: '#eee'
}
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
align: 'left',
color: '#bbb',
}
}
},
series: [
{
name: '我的',
type: 'line',
symbol: 'circle', // 折点处空心圆 注意symbol不只有一个值 还可以是 rect....
showSymbol: false,
symbolSize: 8, // 也可以写成数组[a, b]的形式 前者表宽度，后者表高度
smooth: true, // 平滑折线
itemStyle: {
normal: {
color: colors[0], // 此处绑定图例颜色
lineStyle: { // 线条颜色
color: colors[0],
// type: 'dashed' // 这里把线条设成虚线，在此图上没有体现
}
}
},
data: [0, 4, 4, 4]
},
{
name: '同行同层平均',
type: 'line',
symbol: 'circle', // 折点处空心圆
showSymbol: false,
symbolSize: 8,
smooth: true, // 平滑折线
itemStyle: {
normal: {
color: colors[1],
lineStyle: {
color: colors[1]
}
}
},
data: [0, 4, 4, 4]
}
]
};
// 使用刚指定的配置项和数据显示图表。
eCharts.setOption(option);
带有阴影的折线图
var businessLevle1FlowChart = echarts.init(document.getElementById('business-level-1-flow-chart'));
// 指定图表的配置项和数据
var colors = ['#2062e6','#F3D024',"#FF8533","#4CB5FF","#BC64E5"];
var option = {
tooltip: {
trigger: 'axis',
backgroundColor: '#fff',
borderWidth: 1,//默认值，提示边框线宽，单位px，默认为0（无边框）
borderColor: '#eee',
borderRadius: 6,//默认值，提示边框圆角，单位px，默认为4
padding: 10,
textStyle: {
color: '#999',
fontSize: 12
},
formatter: function(params) { // 根据需求写的fomattar
var sum = 0;
var htmlText= '';
for(var i = 0;i< params.length;i++) {
sum += params[i].value
}
for(var j = 0;j<params.length;j++) {
htmlText +='<i class="icon" style="width:8px;height:8px;background-color:'+params[j].color+';margin-right:5px;vertical-align:1px;"></i>'+params[j].seriesName+' '+params[j].value+' '+(params[j].value/sum*100).toFixed(2)+"%"+'<br/>'
}
return params[0].name+'</br>'+htmlText
},
axisPointer: {
type: 'line', // cross时为十字虚线 也可以为shadow
lineStyle: {
color: '#bbb'
},
shadowStyle : { // 阴影指示器样式设置
width: 'auto', // 阴影大小
color: 'rgba(150,150,150,0.3)' // 阴影颜色
}
}
},
legend: { // 图例
orent: 'vertical',
x: 'left',
data: [
{
name: 'xx免费',
// icon: 'rect'
},
{
name: 'xx流量'
},
{
name: 'xx访问'
},
{
name: 'xx流量2'
},
{
name: '其他'
}
]
},
grid: {
bottom: '20%',
left: '2%',
right: '5%'
},
axisLabel: {
show: false
},
xAxis: { // x坐标轴
type: 'category',
data: ["08-12","08-13","08-14","08-15","08-16","08-17","08-18","08-19","08-20","08-21","08-22","08-23","08-24","08-25","08-26","08-27","08-28","08-29","08-30","08-31","09-01","09-02","09-03","09-04","09-05","09-06","09-07","09-08","09-09","09-10"],
axisLine:{ //坐标轴颜色
lineStyle:{
color:'#bbb'
}
},
axisLine: false, // 控制 坐标轴显示或隐藏
splitLine: { //删掉参考线
show: false
},
axisTick: { // 坐标轴上的小标识
show: false
},
axisLabel: { //刻度值
textStyle: {
color: '#bbb'
},
interval: 2 // x轴每隔2个显示一次文本
},
// axisLabel : {interval: 1},
},
yAxis: {
type: 'value',
boundaryGap: [0, 0.5],
axisLine: false, // 控制 坐标轴显示或隐藏
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
align: 'left',
color: '#bbb',
}
}
},
series: [
{
name: 'xx免费',
type: 'line',
symbol: 'circle', // 折点处空心圆
symbolSize: 8,
showSymbol:false,
smooth: true, // 平滑折线
areaStyle: {normal: { // 此处阴影颜色，这是为纯色不是渐变色
color: '#eef3fd'
}},
/* areaStyle: { // 这种是渐变的
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: colors[0]
}, {
offset: 1,
color: colors[1]
}])
}
}, */
itemStyle: {
normal: {
color: colors[0], // 此处绑定图例颜色
lineStyle: { // 线条颜色
color: colors[0]
}
}
},
data: [20, 16, 85, 40, 76, 10, 25, 30, 41, 65, 88, 41, 40, 36, 20, 20, 30, 12, 32, 41, 25, 62, 65, 35,42, 40, 30, 81, 18, 36]
},
{
name: 'xx流量',
type: 'line',
symbol: 'circle', // 折点处空心圆
symbolSize: 8,
showSymbol:false,
smooth: true, // 平滑折线
areaStyle: {normal: {
color: '#cfe9fb'
}},
itemStyle: {
normal: {
color: colors[3],
lineStyle: {
color: colors[3]
}
}
},
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,0, 0, 0, 0, 0, 0]
},
{
name: '其他',
type: 'line',
symbol: 'circle', // 折点处空心圆
symbolSize: 8,
showSymbol:false,
smooth: true, // 平滑折线
areaStyle: {normal: {
color: '#e9d0f5'
}},
itemStyle: {
normal: {
color: colors[4],
lineStyle: {
color: colors[4]
}
}
},
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,0, 5, 0, 0, 0, 0]
}
]
};
// 使用刚指定的配置项和数据显示图表。
businessLevle1FlowChart.setOption(option);
折柱混合图
var promotionAmountChart = echarts.init(document.getElementById('promotion-amount-chart'));
// 指定图表的配置项和数据
var colors = ['#ff8533','#2062e6']
var option = {
tooltip: {
trigger: 'axis',
backgroundColor: '#fff',
borderWidth: 1,//默认值，提示边框线宽，单位px，默认为0（无边框）
borderColor: '#eee',
borderRadius: 6,//默认值，提示边框圆角，单位px，默认为4
padding: 14,
textStyle: {
color: '#999',
fontSize: 12
},
axisPointer: {
type: 'line', // cross时为十字虚线 也可以为shadow
lineStyle: {
color: '#bbb'
},
shadowStyle : { // 阴影指示器样式设置
width: 'auto', // 阴影大小
color: 'rgba(150,150,150,0.3)' // 阴影颜色
}
},
formatter: function (params) { // 0==> 实际支付金额 1==>上周同期增长率
var year = new Date().getFullYear(); //获取年份
var da = year+"-"+params[0].name;
var d = new Date(da);
var mon=d.getMonth()+1;
var day=d.getDate();
if(day <= 7){
if(mon>1) {
mon=mon-1;
}
else {
year = year-1;
mon = 12;
}
}
d.setDate(d.getDate()-7);
year = d.getFullYear();
mon=d.getMonth()+1;
day=d.getDate();
s = year+"-"+(mon<10?('0'+mon):mon)+"-"+(day<10?('0'+day):day);
return params[0].name+'<br/>上周同期('+s+')<br/>'+
'<i class="icon" style="width:8px;height:8px;background-color:'+params[0].color+';margin-right:5px;"></i>'+params[0].seriesName+' '+params[0].value+'<br/>'+
'<i class="icon" style="width:8px;height:8px;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-ms-border-radius:50%;background-color:'+params[1].color+';margin-right:5px;vertical-align:middle;"></i>'+params[1].seriesName+' '+params[1].value+".00%"
}
},
legend: { // 图例
x: 'left',
data: [
{
name: '实际推广金额',
icon: 'rect',
},
{
name: '上周同比增长率',
icon: 'pin'
}
],
},
grid: {
bottom: '24%',
left: '2%',
right: '6%'
},
axisLabel: {
show: false
},
xAxis: { // x坐标轴
type: 'category',
data: ["08-12","08-13","08-14","08-15","08-16","08-17","08-18","08-19","08-20","08-21","08-22","08-23","08-24","08-25","08-26","08-27","08-28","08-29","08-30","08-31","09-01","09-02","09-03","09-04","09-05","09-06","09-07","09-08","09-09","09-10"],
axisLine:{ //坐标轴颜色
lineStyle:{
color:'#bbb'
}
},
axisLine: false, // 控制 坐标轴显示或隐藏
splitLine: { //删掉参考线
show: false
},
axisTick: { // 坐标轴上的小标识
show: false
},
axisLabel: { //刻度值
textStyle: {
color: '#bbb'
},
interval: 2 // x轴每隔5个显示一次文本
},
// axisLabel : {interval: 1},
boundaryGap: true // 控制 坐标轴两端 空白
},
yAxis: [
{
type: 'value',
position: 'left', // 主要是这里
axisLine: false, // 控制 坐标轴显示或隐藏
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
align: 'left',
color: '#bbb'
}
}
},
{
type: 'value',
// splitNumber: 3,
boundaryGap: [0.5, 0.5],
// boundaryGap: true,
// splitArea: {show: true},
position: 'right', // 主要是这里
axisLine: false, // 控制 坐标轴显示或隐藏
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
formatter: function (value, index) {
// console.log(1,value,index)
return value+'%'
},
textStyle: {
align: 'left',
color: '#bbb'
}
}
}
],
series: [
{
name: '实际推广金额',
type: 'bar', // type 为柱形图
symbol: true, // 折点处空心圆
yAxis: 1,
itemStyle: {
normal: {
color: colors[1],
lineStyle: { // 线条颜色
color: colors[1]
}
}
},
data: [0, 7, 0, 10, 7, 4, 7, 6, 10, 1, 3, 0, 5, 0, 7, 6, 4, 4, 6, 4, 0, 3, 6, 3,0, 3, 10, 0, 0, 7]
},
{
name: '上周同比增长率',
type: 'line', // type 为线性
yAxisIndex: 1,
// smooth: true, // 平滑折线
itemStyle: {
normal: {
color: colors[0],
lineStyle: {
color: colors[0]
}
}
},
data: [0, 11, 42, 10, 17, 4, 100, 40, 10, 32, 22, 14, 6, 7, 52, 7, 2, 51, 5, 4, 20, 25, 20, 64,6, 0, 10, 0, 0, 7]
}
]
};
// 使用刚指定的配置项和数据显示图表。
promotionAmountChart.setOption(option);
柱状图
var cityContributeChart = echarts.init(document.getElementById('city-contribute-chart'))
var colors = ['#2062e6'];
var option = {
tooltip: {},
legend: {
left: "left",
data:['人数']
},
xAxis: {
type: 'category',
data: ["东莞市","广州市","漳州市","萍乡市","邢台市","三亚市", "上海市", "临夏回族自治州", "临汾市", "临沂市"]
},
yAxis: {
type: 'value'
},
series: [
{
itemStyle: {
normal: {color: colors[0]}
},
name: '人数',
barWidth: 20,//柱图宽度
type: 'bar',
data: [5, 20, 36, 10, 10, 20, 6, 12, 36, 26]
}
]
};
cityContributeChart.setOption(option);
var buyContributeChart = echarts.init(document.getElementById('buy-contribute-chart'))
var colors = ['#2062e6'];
option = {
tooltip: {
// trigger: 'axis',
axisPointer: {
type: 'line'
}
},
legend: {
left: "left",
data:['人数']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: { // 里面的数据和上一个颠倒一下就好啦
type: 'value'
},
yAxis: {
type: 'category',
data: ["1000以上","801-1000","601-800","501-600","401-500","400及以下"]
},
series: [
{
itemStyle: {
normal: {color: colors[0]}
},
name: '人数',
type: 'bar',
barWidth: 20,
data: [5, 20, 36, 10, 10, 20]
}
]
};
buyContributeChart.setOption(option);
地图
// 注意使用地图除了引用echarts插件外，还需要引一个china.js
var chinaMapChart = echarts.init(document.getElementById('chinaMap-chart'));
// 指定图表的配置项和数据
// var colors = ['#f96854']
var option = {
tooltip: {
// show: false //不显示提示标签
formatter: '{b}', //提示标签格式
backgroundColor:"#eee",//提示标签背景颜色
textStyle:{color:"#333"} //提示标签字体颜色
},
dataRange: {
min: 0,
max: 200,
y: 130,
itemGap: 5,
color:['#ffa606','#97ce68','#6bcbca','#a3e4e3'],
text:['高','低'], // 文本，默认为数值文本
calculable : true,
// splitNumber: 5
},
series: [{
type: 'map',
mapType: 'china',
label: {
normal: {
show: false,//显示省份标签
// textStyle:{color:"#c71585"}//省份标签字体颜色
},
emphasis: {//对应的鼠标悬浮效果
show: false,
// textStyle:{color:"#800080"}
}
},
itemStyle: {
normal: {
borderWidth: .5,//区域边框宽度
borderColor: '#fff',//区域边框颜色
areaColor:"#eee",//区域颜色
},
emphasis: {
borderWidth: .5,
borderColor: '#ffa508',
areaColor:"#ffa508",
}
},
data:[
{name:'福建', value:120},
{name:'河北', value:3},
{name:'江苏', value:68},
{name:'安徽', value:15},
{name:'山东', value:3},
{name:'辽宁', value:78}
]
}],
};
chinaMapChart.setOption(option);
chinaMapChart.on('mouseover', function (params) {
var dataIndex = params.dataIndex;
});
饼图
扫描二维码关注公众号，回复：
3149840 查看本文章
var pieBoxTicketChart = echarts.init(document.getElementById('pieBox-ticket-chart'));
var colors = ["#6fcbc9","#98cd6d"];
option = {
legend: {
orient: 'vertical',
left: 'right',
align: 'left',
bottom: 'bottom',
data: ['在用','未用'],
formatter: function(name) { // 这里 写的图例及文字
var oa = option.series[0].data;
var num = oa[0].value+oa[1].value;
for(var i=0;i<option.series[0].data.length;i++){
if(name == oa[i].name){
return name+ ' ' +(oa[i].value/num * 100).toFixed(2) + "%";
}
}
}
},
series : [
{
type: 'pie',
radius : '85%',
center: ['40%', '50%'],
label: { //控制引导线及文字显示隐藏
normal: {
show: false
}
/*emphasis: {
show: false
}*/
},
/*normal: {
show: false
},*/
data:[
{
value:335,
name:'在用',
hoverAnimation: false,
itemStyle: {
normal: {
borderWidth: 20,
borderColor: 'transparent',
color: colors[0]
}
}
},
{
value:310,
name:'未用',
hoverAnimation: false,
itemStyle: {
normal: {
borderWidth: 20,
borderColor: 'transparent',
color: colors[1]
}
}
}
]
/*itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}*/
}
]
};
pieBoxTicketChart.setOption(option);
var ageContributeChart = echarts.init(document.getElementById('age-contribute-chart'));
var colors = ["#2062e6","#f3d024","#ff8533", "#4cb5ff", "#bc64e5", "#04c9a8", "#ff6590"];
option = {
series: [
{
// name:'访问来源',
type:'pie',
radius: ['50%', '65%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:4,
name:'18-25岁',
hoverAnimation: false,
itemStyle: {
normal: {
borderWidth: 2, // 为两个颜色之间那个宽度
borderColor: '#fff', // 边框颜色白色
color: colors[0]
}
}
},
{
value:4,
name:'26-30岁',
hoverAnimation: false,
itemStyle: {
normal: {
borderWidth: 2,
borderColor: '#fff',
color: colors[1]
}
}
},
{
value:2,
name:'31-35岁',
hoverAnimation: false,
itemStyle: {
normal: {
borderWidth: 2,
borderColor: '#fff',
color: colors[2]
}
}
},
{
value:2,
name:'36-40岁',
hoverAnimation: false,
itemStyle: {
normal: {
borderWidth: 2,
borderColor: '#fff',
color: colors[3]
}
}
},
{
value:2,
name:'41-50岁',
hoverAnimation: false,
itemStyle: {
normal: {
borderWidth: 2,
borderColor: '#fff',
color: colors[4]
}
}
},
{
value:2,
name:'50岁以上',
hoverAnimation: false,
itemStyle: {
normal: {
borderWidth: 2,
borderColor: '#fff',
color: colors[5]
}
}
},
{
value:2,
name:'未知',
hoverAnimation: false,
itemStyle: {
normal: {
borderWidth: 2,
borderColor: '#fff',
color: colors[6]
}
}
}
]
}
]
};
ageContributeChart.setOption(option);雷达图
上面的图例以及周边数字都是position:absolute上去的
var preheatRadarDouble11Chart = echarts.init(document.getElementById('preheat-radar-double11'));
// 指定图表的配置项和数据
var colors = ['#29affd','#ce98f8'];
preheatRadarDouble11Chart.setOption({
/* legend: {
data: [
{name: '本店'},
{name: '同行同层平均'}
],
right: 10
},*/
tooltip : {
trigger: 'axis'
},
calculable : true,
radar : [ //极坐标
{
// shape: 'circle',
nameGap : 12, // 图中字距离图的距离
center:['45%','40%'], // 圆心
radius: 110, //雷达 大小
name:{
show: true, // 是否显示文字
formatter: null, // 文字的显示形式
textStyle: {
color:'#a3a5b6' // 文字颜色
}
},
indicator : [
{text : '访客人数', max : 1100},
{text : '加购人数', max : 1100},
{text : '加购件数', max : 1100},
{text : '收藏人数', max : 1100},
{text : '领券人数', max : 1100},
{text : '跳失率', max : 1100}
],
axisLine: { // 坐标轴线
show: true, // 默认显示，属性show控制显示与否
lineStyle : {
width : 1,
color : '#ccc' // 图表背景网格线的颜色
}
},
splitArea : {
show : true,
areaStyle : {
color: "#fff" // 图表背景网格的颜色
}
},
splitLine : {
show : true,
lineStyle : {
width : 1,
color : '#b9d3ea' // 图表背景网格线的颜色
}
}
}
],
series : [
{
type: 'radar',
symbol: "none", // 去掉图表中各个图区域的边框线拐点
itemStyle: {
normal: {
color : "rgba(0,0,0,0)", // 图表中各个图区域的边框线拐点颜色
lineStyle: {
color:"white" // 图表中各个图区域的边框线颜色
},
areaStyle: {
type: 'default'
}
}
},
data : [
{
value : [1039, 1039, 1039, 1100, 0, 1000],
name : '本店',
label: {
normal: {
show: true
}
},
itemStyle: {
normal: {
areaStyle: {
type: 'default',
opacity: 0.6, // 图表中各个图区域的透明度
color: colors[0] // 图表中各个图区域的颜色
},
}
},
},
{
value : [1045, 1009, 1013, 1007, 56, 120,0],
name : '同行同层平均',
label: {
normal: {
show: true
}
},
itemStyle: {
normal: {
areaStyle: {
type: 'default',
opacity: 0.8, // 图表中各个图区域的透明度
color: colors[1] // 图表中各个图区域的颜色
},
}
}
}
]
}
]
});
仪表盘
优良差 position:absolute上去的
var gaugeChartFkOld = echarts.init(document.getElementById('gauge-chart-fkOld'));
// 指定图表的配置项和数据
option = {
series : [
{
name: '于同行对比',
type: 'gauge',
z: 3,
min: 0,
max: 100,
splitNumber: 10,
radius: '88%',
center:['50%', '50%'],
// startAngle:15,
// endAngle:45,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 12
}
},
axisTick: { // 坐标轴小标记
length: 15, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
splitLine: { // 分隔线
length: 20, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: '#fff',
width: 2
}
},
/* axisLabel: {
backgroundColor: 'auto',
borderRadius: 2,
color: '#eee',
padding: 3,
textShadowBlur: 2,
textShadowOffsetX: 1,
textShadowOffsetY: 1,
textShadowColor: '#222'
},*/
title : {
offsetCenter: ['0', '100%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontSize: 16,
color: '#3089DC',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
detail : {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
formatter: function (value) {
return value+"%"
},
offsetCenter: ['0', '70%'],
textShadowOffsetX: 0,
textShadowOffsetY: 10,
width: 50,
color: '#3089DC',
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
color: '#3089DC'
}
// rich: {}
},
data:[{value: 40, name: "与同行对比优"}]
}
]
};
// 使用刚指定的配置项和数据显示图表。
gaugeChartFkOld.setOption(option);
var myChartLoop3 = echarts.init(document.getElementById('loop-3'));
// 指定图表的配置项和数据
var colors = ['#2062e6','#F3D024',"#FF8533","#4CB5FF","#BC64E5"];
option = {
series: [
{
name: '业务指标',
type: 'gauge',
aplitNumber: 0, // 分隔段数
title: {
textStyle: {
fontSize: 14,
fontWeight: '600',
color: '#333'
}
},
detail : {
backgroundColor: 'rgba(30,144,255,0.8)',
borderWidth: 1,
borderColor: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 5,
offsetCenter: [0, '50%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
color: '#fff'
}
},
axisLine: {
lineStyle: {
color:[
[0.04,'#2062e6'],
[1,'#cecece']
],
width:2
}
},
axisTick: {
splitNumber: 0,
length: 0
},
axisLabel: {
show: false
},
splitLine: {
show: false
},
pointer: { // 指针
width: 0
},
detail: {formatter:'{value}%'},
data: [{value: 4, name: '访客-收藏转化率'}]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChartLoop3.setOption(option);
无数据是显示气泡
echarts2版本才有当没有数据时显示气泡图（当然还可以设置成别的样子），e3移除了（认为开发者可以自己实现）
var myChart = echarts.init(document.getElementById('content-chart'));
var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[] // 没有数据
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);