| | |
| | | <div class="bar-chart"> |
| | | <ChartTitle name="车间正品率"></ChartTitle> |
| | | <div class="bar-contents"> |
| | | |
| | | <div class="chart" ref="chart"></div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import ChartTitle from "@/components/cockpitPage/ChartTitle.vue"; |
| | | //引入echart |
| | | import * as echarts from 'echarts' |
| | | export default { |
| | | components: { |
| | | ChartTitle, |
| | |
| | | }; |
| | | }, |
| | | mounted() { |
| | | |
| | | let chartData={ |
| | | datax:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
| | | datay:[120, 200, 150, 80, 70, 110, 130] |
| | | } |
| | | this.pieChart('chart',chartData) |
| | | }, |
| | | watch: {}, |
| | | methods: { |
| | | |
| | | //在职 |
| | | pieChart(chartName,data){ |
| | | let chartDom = this.$refs[chartName] |
| | | let myChart = echarts.init(chartDom); |
| | | let option; |
| | | if(data){ |
| | | option = { |
| | | color:['#618DF8'], |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | axisPointer: { |
| | | type: 'none' |
| | | } |
| | | }, |
| | | grid: { |
| | | right: "11%", |
| | | bottom:'21%', |
| | | }, |
| | | dataZoom: [ |
| | | { |
| | | type: 'inside', |
| | | // show: true, //显示滚动条 |
| | | start:0, |
| | | end: 100, |
| | | xAxisIndex: 0, |
| | | minSpan:20, |
| | | maxSpan:100, |
| | | // handleSize: 8 |
| | | }, |
| | | { |
| | | // type: 'slider', //两个一个是slider,一个是inside,slider是增加滚动条以及鼠标拖动滚动条功能,inside则是鼠标滚轮滚动滚动条。 |
| | | type: 'inside', |
| | | // show: true, |
| | | // realtime : true, |
| | | xAxisIndex: 0, |
| | | minSpan:20, |
| | | maxSpan:100, |
| | | start: 0, |
| | | end: 100 |
| | | }, |
| | | ], |
| | | legend: { |
| | | itemWidth: 12, |
| | | itemHeight: 12, |
| | | itemGap: 35,//间距 |
| | | // data:data.legend?[ |
| | | // { |
| | | // name:data.legend.data[0], |
| | | // icon: 'roundRect', |
| | | // }, |
| | | // ]:[] |
| | | }, |
| | | xAxis: [ |
| | | { |
| | | type: 'category', |
| | | axisTick: { |
| | | show: false |
| | | }, |
| | | axisLine: { |
| | | show: true, |
| | | lineStyle: { |
| | | color:'#EAEAEA', |
| | | } |
| | | }, |
| | | axisLabel:{ |
| | | rotate:45, |
| | | margin: 12, |
| | | show: true, |
| | | textStyle: { |
| | | color: '#9B9B9B' |
| | | }, |
| | | }, |
| | | data: data.datax?data.datax:[], |
| | | } |
| | | ], |
| | | yAxis: [ |
| | | { |
| | | type: '', |
| | | name: 'yyy', |
| | | // min: data.yAxis[0].min?data.yAxis.min:0, |
| | | minInterval: 1,//坐标轴是整数 |
| | | max:Math.ceil(eval(`Math.max(${data.datay})`)/5)*5,//数据最大值加3 |
| | | interval: Math.ceil(eval( `Math.max(${data.datay})`)/5)*5 / 5, |
| | | position: 'left', |
| | | axisLine: { |
| | | show: true, |
| | | lineStyle: { |
| | | color:'#EAEAEA', |
| | | } |
| | | }, |
| | | nameTextStyle:{ |
| | | color:"#9B9B9B", |
| | | }, |
| | | splitLine: { |
| | | show: true, |
| | | lineStyle: { |
| | | // 使用深浅的间隔色 |
| | | color: '#EAEAEA', |
| | | } |
| | | }, |
| | | axisTick: { |
| | | show: false |
| | | }, |
| | | axisLabel: { |
| | | textStyle: { |
| | | color: '#9B9B9B' |
| | | }, |
| | | formatter: '' |
| | | } |
| | | } |
| | | ], |
| | | series:[ |
| | | { |
| | | type: '', |
| | | name: 'y', |
| | | barWidth: '20%', |
| | | itemStyle: { |
| | | normal: { |
| | | //柱形图圆角,初始化效果 |
| | | barBorderRadius:[4, 4, 0, 0], |
| | | } |
| | | }, |
| | | data: data.datay, |
| | | } |
| | | ] |
| | | }; |
| | | |
| | | option && myChart.setOption(option); |
| | | }else{ |
| | | option={}; |
| | | myChart.setOption(option,true); |
| | | } |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | |
| | | height:calc(100% - 60px); |
| | | border:1px solid #00FFFF; |
| | | box-sizing: border-box; |
| | | .chart{ |
| | | width: 100%; |
| | | height:100%; |
| | | } |
| | | } |
| | | } |
| | | </style> |