|
@@ -23,100 +23,86 @@
|
|
|
methods: {
|
|
|
// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=daPJGrcYMpZanpxR
|
|
|
myEcharts(yData,seriesData) {
|
|
|
-
|
|
|
+ var seriesDataY=[]
|
|
|
+ if(seriesData!=null&&seriesData.length>0){
|
|
|
+ for (let i = seriesData.length-1; i >= 0; i--) {
|
|
|
+ seriesDataY.push(seriesData[i])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var yDatay=[]
|
|
|
+ if(yData!=null&&yData.length>0){
|
|
|
+ for (let i = yData.length-1; i >= 0; i--) {
|
|
|
+ yDatay.push(yData[i])
|
|
|
+ }
|
|
|
+ }
|
|
|
var chartDom = document.getElementById('foam');
|
|
|
var myChart = echarts.init(chartDom);
|
|
|
- var zdslColorList = ['#D0A00E', '#34DA62', '#00C0E9', '#0096F3', '#33CCFF'];
|
|
|
var option;
|
|
|
option = {
|
|
|
- grid: {
|
|
|
- top: '5%',
|
|
|
- left: '10%',
|
|
|
- right: '12%',
|
|
|
- bottom: '0',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- show:false
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- show: false,
|
|
|
- type: 'value'
|
|
|
- },
|
|
|
- yAxis: [{
|
|
|
- type: 'category',
|
|
|
- inverse:true,
|
|
|
- data: yData,
|
|
|
- axisLabel: {
|
|
|
- show: true,
|
|
|
- textStyle: {
|
|
|
- color: '#ADD6FF',
|
|
|
- fontSize: '12'
|
|
|
- }
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- splitLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- show: true,
|
|
|
- textStyle: {
|
|
|
- color: '#ADD6FF',
|
|
|
- fontSize: '12'
|
|
|
- }
|
|
|
- },
|
|
|
- data: seriesData
|
|
|
- }
|
|
|
- ],
|
|
|
-
|
|
|
- series: [{
|
|
|
- name: "受理数", // bar图的外边框
|
|
|
- type: "bar",
|
|
|
- barWidth: "20%",
|
|
|
- yAxisIndex: 0,
|
|
|
- data: [100, 100, 100, 100, 100].map((item, i) => {
|
|
|
- return {
|
|
|
- value: item,
|
|
|
- itemStyle: {
|
|
|
- color: "rgba(0,0,0,0)",
|
|
|
- barBorderColor: zdslColorList[i],
|
|
|
- borderWidth: 1,
|
|
|
- shadowColor: "#33CCFF",
|
|
|
- shadowBlur: 4
|
|
|
- }
|
|
|
- }
|
|
|
- }),
|
|
|
- },
|
|
|
- {
|
|
|
- name: "受理数", //这个是Bar图
|
|
|
- type: 'bar',
|
|
|
- yAxisIndex: 1,
|
|
|
- barWidth: "10%",
|
|
|
- data: seriesData
|
|
|
- }
|
|
|
- ],
|
|
|
- itemStyle: {
|
|
|
- color: function(params) {
|
|
|
- return zdslColorList[params.dataIndex]
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ tooltip: {},
|
|
|
+ grid: {
|
|
|
+ top: 20,
|
|
|
+ left:100,
|
|
|
+ bottom: 0,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'category',
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ triggerEvent: true,
|
|
|
+ data: yDatay
|
|
|
+ },
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ type: 'slider',
|
|
|
+ show: true,
|
|
|
+ // 设置组件控制的y轴
|
|
|
+ yAxisIndex: 0,
|
|
|
+ right: 20,
|
|
|
+ top: 0,
|
|
|
+ // 数据窗口范围的起始百分比。范围是:0 ~ 100。表示 0% ~ 100%
|
|
|
+ // 也可以用 startValue设置起始值
|
|
|
+ start: 50,
|
|
|
+ end: 100,
|
|
|
+ width: 12,
|
|
|
+ height: 230,
|
|
|
+ // 组件的背景颜色
|
|
|
+ backgroundColor: 'rgba(0, 0, 0, 0.4)',
|
|
|
+ // 选中范围的填充颜色
|
|
|
+ fillerColor: '#00FFFF',
|
|
|
+ // 边框颜色
|
|
|
+ borderColor: '#0094E9',
|
|
|
+ // 是否显示detail,即拖拽时候显示详细数值信息
|
|
|
+ showDetail: false,
|
|
|
+ // 控制手柄的尺寸
|
|
|
+ handleSize: 16,
|
|
|
+ // 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势。
|
|
|
+ showDataShadow: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'inside',
|
|
|
+ yAxisIndex: [0],
|
|
|
+ start: 50,
|
|
|
+ end: 100,
|
|
|
+ // 不按任何功能键,鼠标滚轮能触发缩放
|
|
|
+ zoomOnMouseWheel: false,
|
|
|
+ // 不按任何功能键,鼠标移动能触发数据窗口平移
|
|
|
+ moveOnMouseWheel: true
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: {
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 5,
|
|
|
+ data: seriesDataY
|
|
|
+ }
|
|
|
+ }
|
|
|
option && myChart.setOption(option);
|
|
|
},
|
|
|
|