|
@@ -0,0 +1,108 @@
|
|
|
|
|
+const app = getApp();
|
|
|
|
|
+import * as echarts from '../../../../ec-canvas/echarts' // 这个是自己实际的目录
|
|
|
|
|
+Component({
|
|
|
|
|
+ data:{
|
|
|
|
|
+ Ec: { lazyLoad: true, },
|
|
|
|
|
+ },
|
|
|
|
|
+ lifetimes: {
|
|
|
|
|
+ attached: function () {
|
|
|
|
|
+ this.init()
|
|
|
|
|
+ },
|
|
|
|
|
+ moved: function () { },
|
|
|
|
|
+ detached: function () { },
|
|
|
|
|
+ },
|
|
|
|
|
+ methods:{
|
|
|
|
|
+ init(){
|
|
|
|
|
+ var that = this;
|
|
|
|
|
+ that.selectComponent('#chartConDom').init((canvas, width, height, dpr) => {
|
|
|
|
|
+ const chart = echarts.init(canvas, null, {
|
|
|
|
|
+ width: width,
|
|
|
|
|
+ height: height,
|
|
|
|
|
+ devicePixelRatio: dpr
|
|
|
|
|
+ });
|
|
|
|
|
+ var option = that.getOrderWarnOption();
|
|
|
|
|
+ chart.setOption(option);
|
|
|
|
|
+ return chart;
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ getOrderWarnOption(){
|
|
|
|
|
+ var list = [
|
|
|
|
|
+ {name:"支",data:[{name:"北京",value:30,},{name:"上海",value:30,},{name:"杭州",value:20,},{name:"天津",value:30,}]},
|
|
|
|
|
+ {name:"包",data:[{name:"北京",value:50,},{name:"上海",value:30,},{name:"杭州",value:30,},{name:"天津",value:30,}]},
|
|
|
|
|
+ {name:"箱",data:[{name:"北京",value:50,},{name:"上海",value:30,},{name:"杭州",value:30,},{name:"天津",value:30,}]},
|
|
|
|
|
+ {name:"托盘",data:[{name:"北京",value:50,},{name:"上海",value:30,},{name:"杭州",value:30,},{name:"天津",value:30,}]},
|
|
|
|
|
+ ]
|
|
|
|
|
+ var fontSize = 10
|
|
|
|
|
+ var fontColor = "#999999"
|
|
|
|
|
+ return {
|
|
|
|
|
+ color:["#7A4AFF","#28E556","#2D59E6","#FFAE36","#EA1C43",],
|
|
|
|
|
+ title:{
|
|
|
|
|
+ text:"不同产品包装",
|
|
|
|
|
+ show:0,
|
|
|
|
|
+ textStyle:{
|
|
|
|
|
+ color:fontColor,
|
|
|
|
|
+ fontSize:fontSize,
|
|
|
|
|
+ },
|
|
|
|
|
+ left:'1%',
|
|
|
|
|
+ top:0,
|
|
|
|
|
+ },
|
|
|
|
|
+ grid: {
|
|
|
|
|
+ top: '20%',
|
|
|
|
|
+ left: '6%',
|
|
|
|
|
+ right: '4%',
|
|
|
|
|
+ bottom: '3%',
|
|
|
|
|
+ containLabel: true
|
|
|
|
|
+ },
|
|
|
|
|
+ legend:{
|
|
|
|
|
+ icon:"circle",
|
|
|
|
|
+ right:'10%',
|
|
|
|
|
+ top:0,
|
|
|
|
|
+ itemWidth:fontSize*0.8,
|
|
|
|
|
+ itemHeight:fontSize*0.8,
|
|
|
|
|
+ textStyle:{
|
|
|
|
|
+ fontSize:fontSize,
|
|
|
|
|
+ color:fontColor,
|
|
|
|
|
+ },
|
|
|
|
|
+ data:list.map(item=>item.name)
|
|
|
|
|
+ },
|
|
|
|
|
+ tooltip: {
|
|
|
|
|
+ trigger: 'axis',
|
|
|
|
|
+ axisPointer: {
|
|
|
|
|
+ type: 'cross',
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ yAxis: {
|
|
|
|
|
+ type: 'value',
|
|
|
|
|
+ axisTick:{show:false,},
|
|
|
|
|
+ axisLabel:{
|
|
|
|
|
+ fontSize:fontSize,
|
|
|
|
|
+ color:fontColor,
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+ xAxis: {
|
|
|
|
|
+ type: 'category',
|
|
|
|
|
+ axisTick:{show:false,},
|
|
|
|
|
+ axisLabel:{
|
|
|
|
|
+ fontSize:fontSize,
|
|
|
|
|
+ color:fontColor,
|
|
|
|
|
+ },
|
|
|
|
|
+ data: list[0].data.map(item=>item.name)
|
|
|
|
|
+ },
|
|
|
|
|
+ series:this.setOptItem(list),
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ setOptItem(list){
|
|
|
|
|
+ var data = []
|
|
|
|
|
+ for(var i in list){
|
|
|
|
|
+ data.push({
|
|
|
|
|
+ type: 'bar',
|
|
|
|
|
+ silent:1,
|
|
|
|
|
+ barMaxWidth:this.fontSize*1.5,
|
|
|
|
|
+ name:list[i].name,
|
|
|
|
|
+ data:list[i].data
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ return data
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+})
|