js-echarts图得配置（南淝河项目）
echarts图添加滚动条
if (data.length > 4) {
dataZoom = [
{
type: 'slider',
show: false,
xAxisIndex: [0],
start: 1,
end: 0,
handleSize: 1,
height:"2%",
width:"76%",
bottom:"3%",
textStyle:false,
left:'12%',
borderColor:'rgb(5,181,232)',
fillerColor:'rgb(5,181,232)'
}
];
dataZoom[0].show = true;
dataZoom[0].end = (4 / data.length * 100).toFixed(0);
}
echarts图截取横坐标的显示
xAxis: {
data: xData,
axisTick: {show: false},//坐标轴小标记，默认不显示
axisLine: {show: false},//坐标轴线，默认显示
axisLabel:{
show: true,
textStyle: {
fontSize: 16,
fontFamily: '黑体',
color:'#059dc7'
},
formatter:function(str){
var xname="";//放最终拼接成的字符串
var strLen=str.length;//实际长度
var provideLen=3;//控制一行长度
var rowNum=Math.ceil(strLen / provideLen);//向上取整，算出换行数
if(strLen>provideLen){
for(var i=0;i- y轴
yAxis: {
max: maxNum,
axisLine: {show: false},
axisLabel:{show: false},
axisTick: {show: false},
splitLine:{show: false}
},
series: [
{
name: '危险源数',//系列名称，如启用legend，将被legend.data索引相关
type: 'bar',//图表类型
symbolClip: true,
barCategoryGap:"65%",
label:{
normal: {
show: true,
position: 'inside',
formatter: function (param) {
return param.value;
},
textStyle: {
fontSize: 12,
fontFamily: 'Arial',
color: '#000'
}
}
},
itemStyle: {
normal: {
color:function(colors){
var colorList=colorAry;
return colorList[colors.dataIndex]
},
barBorderRadius:[6,6,0,0]
}
},
data: yData,
z: 10//二级层叠控制，相同level上z越大层级越高
},
{
name: 'full',
type: 'bar',
barGap:'-100%',
//tooltip:false,
itemStyle: {
normal: {
color: '#2d2f31',
barBorderRadius:[6,6,0,0]
}
},
data: fullData
}
],
echarts图改变不同柱子的颜色
series: [
{
name: '食品费',
//type决定图表类型
type: 'pictorialBar',
symbolRepeat: true,
symbolSize: [36, 4],
symbolMargin: 1,
data: [15, 25, 18],
barWidth: '30%',
itemStyle: {
normal: {
//每根柱子颜色设置
color: function(params) {
let colorList = [
"#c23531",
"#2f4554",
"#61a0a8",
];
return colorList[params.dataIndex];
}
}
},
},
]
echarts 图给数据拼接单位
label: {
normal: {
show: true,
position: 'top',
color:'#00ffff',
fontSize:14,
formatter:'{c}%'
},
},
echarts图修改图例的样式，以及显示左右两边的位置
legend: [
{
x:'left',
top: '5%',
left:'10%',
textStyle: {
color: '#fff',
fontSize: 14
},
itemWidth:8,
data: [{
name: "COD",
icon:'square'
}]
},
{
x:'center',
top: '5%',
left:'22%',
textStyle: {
color: '#fff',
fontSize: 14
},
itemWidth:8,
data: [{
name: "氨氮",
icon:'square'
}]
},
{
x:'right',
top: '5%',
left:'82%',
textStyle: {
color: '#fff',
fontSize: 14
},
itemWidth:8,
data: [{
name: "总磷",
icon:'square'
}]
}
],
图例显示图片
图例配置图片样式
legend:[
{
x:'left',
itemWidth:30,
itemHeight:10,
left:240,
data:[
{
name:xname1,
icon:'image://app/components/common/charts/diagramBarCharts/img/chaobiao-icon.png',
textStyle:{
color:'#fff',
fontSize:12
},
},
]
},
{
x:'right',
itemWidth:10,
itemHeight:10,
left:360,
data:[
{
name:xname2,
icon:'circle',
textStyle:{
color:'#fff',
fontSize:12
},
}
]
}
],
echarts图显示双y轴
yAxis: [{
type: 'value',
name: '吨/年',
min: -50,
max: maxL,
position: 'left',
axisLine: {
lineStyle: {
color: '#ffffff'
}
},
axisLabel: {
formatter: '{value} ',
lineStyle:{
color:"#fff"
}
},
splitLine:{
show:false,
},
},
{
type: 'value',
name: '吨/年',
min: -50,
position: 'right',
**yAxisIndex:1,**
axisLine: {
lineStyle: {
color: '#ffffff'
}
},
axisLabel: {
formatter: '{value} ',
lineStyle:{
color:"#fff"
}
},
splitLine:{
show:false,
},
}
],
serise使用数组配置多个不同类型以及多个不同数据组
seriesData.push(
{
name:this.opts.series.lineData[i].name,
type: 'line',
yAxisIndex: 1,
symbol:'none',
color:color[i],
// barWidth:10,
data:linedata[i].data,
itemStyle:{
normal:{
lineStyle:{
type:'dashed',
}
}
}
}
)
==============================
seriesData.push(
{
name:bardata[i].name,
type: 'bar',
yAxisIndex: 1,
barWidth:10,
data:bardata[i].data,
}
);
===============================
http://gallery.echartsjs.com/editor.html?c=xB1vJ4Lz87
排口整改
let max = 300,
value = 200;
option = {
backgroundColor: 'black', //背景必须与symbal颜色一样
"xAxis": {
type: 'value',
"max": max,
"splitLine": {
"show": false
},
"axisLine": {
"show": false
},
"axisLabel": {
"show": false
},
"axisTick": {
"show": false
}
},
"yAxis": [{
"type": "category",
"inverse": false,
"data": [],
"axisLine": {
"show": false
},
"axisTick": {
"show": false
},
"axisLabel": {
"margin": -4,
"textStyle": {
"color": "#fff",
"fontSize": 16.25
}
}
}],
"series": [
{
name: '餐盒费',
//type决定图表类型
type: 'pictorialBar',
symbolRepeat: true,
symbolSize: [4, 20],
// z: -10,
symbolMargin: 2,
//stack 数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。
stack:'费用',
data: [20],
barWidth: '30%',
itemStyle: {
color:'#51FFAE',
},
},
{
name: '食品费',
//type决定图表类型
type: 'pictorialBar',
symbolRepeat: true,
symbolSize: [4, 20],
symbolMargin: 2,
// z: -1,
//stack 数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。
stack:'费用',
data: [15],
barWidth: '30%',
itemStyle: {
color:'#CEC608',
},
},
// { //内
// type: 'pictorialBar',
// barWidth: 40,
// symbolRepeat: true,
// symbolSize: [4, 36],
// symbolMargin: 1,
// label: {
// normal: {
// show: true,
// position: 'right',
// textStyle: {
// color: '#fff'
// },
// formatter: function(e) {
// return (e.value / max * 100).toFixed(2) + "%"
// }
// }
// },
// legendHoverLink: false,
// silent: true,
// itemStyle: {
// normal: {
// //每根柱子颜色设置
// color: function(params) {
// let colorList = [
// "#c23531",
// "#2f4554",
// ];
// return colorList[params.dataIndex];
// }
// }
// },
// data: [value]
// },
{ //框
type: 'bar',
symbolRepeat: true,
symbolSize: [4, 36],
symbolMargin: 1,
barWidth: 50,
barGap: '100%',
label: {
normal: {
show: false,
position: 'right',
textStyle: {
color: '#000'
}
}
},
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)', //底色
barBorderRadius:50,
borderWidth: 2,
borderColor: 'grey'
}
},
data: [max],
z: 1,
},
]
};