itfan123两个木头和一个弧线
原创
import * as echarts from echarts;
var chartDom = document.getElementById(main);
var myChart = echarts.init(chartDom);
var option;
var xData = [1月,2月,3月,4月,5月,6月,7月,8月,9月,10月,11月,12月];
var yDataLeft = [1,205,84,568,689,4587,1030,205,84,568,689,4587];
var yDataRight = [1030,205,84,568,689,4587,1030,205,84,568,689,4587];
var money = [100,05,8,68,89,87,100,05,4,68,69,7];
option = {
// title: { text: 在Vue中使用echarts },
// tooltip: {注释后，鼠标在通过扇形图时不显示。
// trigger: item,
// padding: 1,
// formatter(param) {
// var resultTooltip =
// "" +
// "" + param.name + "" +
// ""+
// " " + ": " +
// "" + param.value + "" +
// "" +
// "";
// return resultTooltip
// }
// },
// tooltip: {
// trigger: "axis",
// backgroundColor: "rgba(0, 0, 0, 0.41)",
// axisPointer: {
// type: "shadow",
// label: {
// show: true,
// backgroundColor: "rgba(0, 0, 0, 0.41)",
// },
// },
// formatter: (params, ticket, callback) => {
// // console.log(params, params)
// // console.log(ticket, ticket)
// var html =
// ;
// // background: rgba(0, 0, 0, 0.11);
// //通用功能将params数组已反转
// // console.log(params121111111111111111111111, params)
// let par = [];
// for (let index = params.length - 1; index >= 0; index--) {
// par.push(params[index]);
// }
// console.log("param222222222222222222", par);
// par.forEach((item, index) => {
// if (index === 0) {
// html +=
// +
// item.name +
// "";
// }
// if (item.seriesName) {
// if(item==par[1]){
// var marker = item.marker.replace(/background-color:[object Object]/, background-color:rgba(249, 185, 91, 1))
// marker = (marker + "").replace(/10/g, "15");
// marker = marker.replace(/width:15px;/, width:30px;)
// }
// else if(item==par[3]){
// var marker = item.marker.replace(/background-color:[object Object]/, background-color:rgba(91, 143, 249, 1))
// marker = (marker + "").replace(/10/g, "15");
// marker = marker.replace(/width:15px;/, width:30px;)
// }else{
// var marker =(item.marker + "").replace(/10/g, "15");
// }
// marker = marker.replace(/margin-right:5px;border-radius:15px;/, margin-right:15px;border-radius:0px;)
// console.log("item.marker666666666", marker);
// // if(item.value==0.000001){
// // item.value=0
// // }
// let value=0
// if(item.value!=0.000001){
// value=item.value
// }
// html +=
// +
// marker +
// " " +
// item.seriesName +
// +
// value +
// "" +
// "";
// }
// });
// html += "";
// return html;
// },
// },
grid: {
left: 6%,
top: 20%,
// right: "3%",
bottom: 13%,
width: 87%,
height: 62%
},
legend: [
{
data: [总数, 已完成],
// textStyle: {
// color: "#ccc",
// },
selectedMode: false,
top: 7%,
right: 20%,
itemWidth: 10,
itemHeight: 10,
itemGap: 50,
symbolKeepAspect: true,
orient: horizontal,
icon: rect,
textStyle: {
color: #676a6c,
fontSize: 14,
fontFamily: PingFangSC-Regular, PingFang SC,
lineHeight: 25,
fontWeight: 400
}
},
{
data: [未完成],
// textStyle: {
// color: "#ccc",
// },
selectedMode: false,
top: 8%,
right: 7%,
itemWidth: 49,
itemHeight: 2,
symbolKeepAspect: true,
orient: horizontal,
icon: rect,
textStyle: {
color: #676a6c,
fontSize: 14
}
}
],
xAxis: [
{
data: xData,
offset: 18,
axisLine: {
lineStyle: {
color: #676a6c
}
},
axisLabel: {
textStyle: {
color: #676a6c,
fontSize: 14,
fontWeight: 400,
fontFamily: HelveticaNeue
},
margin: 5, //刻度标签与轴之间的距离。
lineStyle: {
width: 20
},
formatter: function (value, index) {
// console.log("value1111111", value);
if (value == undefined) {
return;
}
var strs = value.split();
var str = ;
for (var i = 0, s; (s = strs[i++]); ) {
str += s;
if (!(i % 6)) str += ; } return str; } },
// axisLine: {
// show: false //不显示x轴
// },
axisTick: {
show: false //未显示比例
},
boundaryGap: true,
splitLine: {
show: false,
width: 0.08,
lineStyle: {
type: solid,
color: #676a6c
}
}
}
],
yAxis: [
{
name: 项数,
// name:单位：万m³,
// splitLine: {
// // show: false,
// lineStyle: {
// color: "#eee",
// type: "solid",
// },
// },
splitLine: {
lineStyle: {
// color: "rgba(185, 255, 232, 1)",
color: rgba(103,106,108,.4),
type: solid,
width: 1
// opacity: 0.5,
}
},
axisLine: {
lineStyle: {
color: #676a6c,
// color: red,
width: 0.1
}
},
axisLabel: {
textStyle: {
fontSize: 14,
fontFamily: HelveticaNeue,
lineHeight: 10,
color: #676a6c,
fontWeight: 400
}
},
splitNumber: 5
},
{
name: 金额,
splitLine: { show: false },
axisLine: {
lineStyle: {
color: #676a6c
}
},
axisLabel: {
formatter: {value} ,
textStyle: {
fontSize: 14,
fontFamily: HelveticaNeue,
lineHeight: 10,
color: #676a6c,
fontWeight: 400
}
}
}
],
// 滚动条
dataZoom: [
{
show: xData.length > 11 ? true : false,
//show: false,
height: 10,
xAxisIndex: [0],
bottom: -5,
start: 0,
end: xData.length > 11 ? 60 : 100,
handleIcon:
path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z,
handleSize: 110%,
handleStyle: {
color: rgba(255, 255, 255,0.5)
},
textStyle: {
color: #fff,
fontSize: 10
},
fillerColor: rgba(42, 131, 223,1),
borderColor: rgba(66, 130, 197,1),
backgroundColor: rgba(12, 67, 124,0.5),
showDataShadow: false,
brushSelect: false
},
{
show: xData.length > 11 ? true : false,
type: inside,
zoomOnMouseWheel: false //滚筒是否触发缩放
}
],
series: [
{
name: 未完成,
type: line,
smooth: false, //true平滑曲线，false折线
// showAllSymbol: true,
showSymbol: true, //是否显示Symbol心
// symbol: "emptyCircle",//空心
symbol: circle, //实心
symbolSize: 8, //空心/实心尺寸
yAxisIndex: 1,
itemStyle: {
normal: {
// color: "rgba(90, 216, 166, 1)",
color: rgb(165, 188, 248)
}
},
zlevel: 3,
data: money
// data:[15,85,80,76,65,76,65,80,76,65,76,65],
},
// {//柱底圆片
// name: "",
// type: "pictorialBar",
// symbolSize: [16, 12],//调整横截面形状
// symbolOffset: [-9, 5],
// z: 12,
// itemStyle: {
// "normal": {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: "rgba(89,211,255,1)"
// },
// {
// offset: 1,
// color: "rgba(23,237,194,1)"
// }
// ])
// }
// },
// data: line
// },
//柱体
{
name: 总数,
type: bar,
barWidth: 26,
// barGap: 20%,
barWidth: 20%,
barGap: 5%,
itemStyle: {
normal: {
// "color": {
// "x": 0,
// "y": 0,
// "x2": 0,
// "y2": 1,
// "type": "linear",
// "global": false,
// "colorStops": [{//下文第1节
// "offset": 0,
// "color": "rgba(16, 87, 172, 1)"
// }, {
// "offset": 1,
// "color": "rgba(35, 159, 227, 1)"
// }]
// }
color: #409EFF
}
},
data: yDataLeft
},
//柱顶圆片
// {
// name: "",
// type: "pictorialBar",
// symbolSize: [16, 12],//调整横截面形状
// symbolOffset: [-10, -5],
// z: 12,
// symbolPosition: "end",
// "itemStyle": {
// "normal": {
// color: "#17C7EC"
// }
// },
// data: yDataLeft
// },
// {//柱底圆片
// name: "",
// type: "pictorialBar",
// symbolSize: [16, 12],//调整横截面形状
// symbolOffset: [10, 6],
// z: 12,
// itemStyle: {
// "normal": {
// color: "purple"
// }
// },
// data: line
// },
//柱体
{
name: 已完成,
type: bar,
barWidth: 26,
// barGap: 22%,
barWidth: 20%,
barGap: 5%,
itemStyle: {
normal: {
// "color": {
// "x": 0,
// "y": 0,
// "x2": 0,
// "y2": 1,
// "type": "linear",
// "global": false,
// "colorStops": [{//下文第1节
// "offset": 0,
// "color": "rgba(186, 115, 60, 1)"
// }, {
// "offset": 1,
// "color": "rgba(255, 229, 135, 1)"
// }]
// }
color: #67C23A
}
},
data: yDataRight
}
//柱顶圆片
// {
// name: "",
// type: "pictorialBar",
// symbolSize: [16, 12],//调整横截面形状
// symbolOffset: [10, -5],
// z: 12,
// symbolPosition: "end",
// "itemStyle": {
// "normal": {
// color:"rgba(255, 222, 109, 1)"
// }
// },
// data: yDataRight
// },
]
};
option && myChart.setOption(option);版权声明
所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除
相关文章
-
解决SolidWorks2019许可证错误-85440
-
解决sklearn.datasets.fetch_20newsgroups下载速度慢的问题
-
解决sklearn.datasets.fetch_20newsgroups下载报错问题分享
-
解决Scratch3.0scratch-hex文件下载失败问题
-
解决RHEL7无法使用YUM源的问题
-
解决Qt应用中遇到的libpngwarningiCCPknownincorrectsRGBprofile问题
-
解决QT启动时找不到python36.dll问题
-
解决Qt5在麒麟Linux下不能输入中文问题
-
解决QT5.12.6使用32位MinGW编译器无法使用SSL协议问题
-
解决PyTorchCUDA编译问题指南
作者文章
- 解决SolidWorks2019许可证错误-85440 3个月前 (02-11)
- 解决sklearn.datasets.fetch_20newsgroups下载速度慢的问题 3个月前 (02-11)
- 解决sklearn.datasets.fetch_20newsgroups下载报错问题分享 3个月前 (02-11)
- 解决Scratch3.0scratch-hex文件下载失败问题 3个月前 (02-11)
- 解决RHEL7无法使用YUM源的问题 3个月前 (02-11)