import * as echarts from 'echarts'; let angle = 0;//角度,用来做简单的动画效果的 let value = 78; //图上角度数据 let result = [ { name: '制造业', value: 5713,itemStyle: {color: '#FF7734'}}, { name: '信息传输、软件和信息技术服务业', value: 3022 ,itemStyle: {color: '#FFC700'}}, { name: '科学研究和技术服务业', value: 2647 ,itemStyle: {color: '#34FFE7'}}, { name: '金融业', value: 2291 }, { name: '批发和零售业', value: 1946 }, { name: '交通运输、仓储和邮政业', value: 1812 }, { name: '教育', value: 1756 }, { name: '建筑业', value: 1712 }, { name: '房地产业', value: 1666 }, { name: '水利、环境和公共设施管理业', value: 1621 } ] const optins={ // 用户图表 userChartOption : { color:[ new echarts.graphic.LinearGradient(0, 1, 0, 0, [ { offset: 1, color: 'transparent' }, { offset: 0, color: '#0081C3' }, ]) , new echarts.graphic.LinearGradient(0, 1, 0, 0, [ { offset: 1, color: 'transparent' }, { offset: 0, color: '#3E54BF' }, ]) , new echarts.graphic.LinearGradient(0, 1, 0, 0, [ { offset: 1, color: 'transparent' }, { offset: 0, color: '#4DBFD9' }, ]) , ], tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, // color: transparent; legend: {}, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', data: ['11.01', '11-02', '11-03', '11-04', '11-05',] } ], yAxis: [ { type: 'value', splitLine:{ show:true, lineStyle:{ type:'dashed',//背景色为虚线, color:'#256980' } } }, ], series: [ { name: '新增用户数量', type: 'bar', emphasis: { focus: 'series' }, data: [320, 332, 301, 334, 390, 330, 320], itemStyle: { borderWidth: 1, borderColor: "#384FB4", }, backgroundStyle: { color: ['red'] } }, { name: '访问用户数量', type: 'bar', emphasis: { focus: 'series' }, data: [120, 132, 101, 134, 90, 230, 210], itemStyle: { borderWidth: 1, borderColor: "#3E54BF", }, }, { name: '累计用户数量', type: 'bar', emphasis: { focus: 'series' }, data: [220, 182, 191, 234, 290, 330, 310], itemStyle: { borderWidth: 1, borderColor: "#4EC1DB", }, }, ] }, // 地方店铺数量统计 storeNum:{ backgroundColor:"#061740", title: { text: '{a|'+ 70 +'}{c|%}', x: 'center', y: 'center', textStyle: { rich:{ a: { fontSize: 10, color: '#ffffff', fontWeight: 'bold' }, c: { fontSize: 10, color: '#ffffff', fontWeight: 'normal' } } } }, series: [ //内环 { name: "", type: 'custom', coordinateSystem: "none", renderItem: function(params, api) { return { type: 'arc', shape: { cx: api.getWidth() / 2, cy: api.getHeight() / 2, r: Math.min(api.getWidth(), api.getHeight()) / 2.3 * 0.65, startAngle: (0+-angle) * Math.PI / 180, endAngle: (360+-angle) * Math.PI / 180 }, style: { stroke: "#0CD3DB", fill: "transparent", lineWidth: 0.5 }, silent: true }; }, data: [0] }, //外环 { name: '', type: 'pie', radius: ['85%', '70%'], silent: true, clockwise: true, startAngle: 90, z: 0, zlevel: 0, label: { normal: { position: "center", } }, data: [ { value: 60, name: "", itemStyle: { normal: { //外环发光 borderWidth: 0.5, shadowBlur: 20, borderColor: '#4bf3f9', shadowColor: '#9bfeff', color: { // 圆环的颜色 colorStops: [{ offset: 0, color: '#4bf3f9', // 0% 处的颜色 }, { offset: 1, color: '#4bf3f9', // 100% 处的颜色 }] }, } } }, { value: 100-70, name: "", label: { normal: { show: false } }, itemStyle: { normal: { color: "#173164" } } } ] }, ] }, // 成交用户统计信息表 transactionUsers : { color: ['#015989', '#583936', '#416979'], title: { text: '' }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } }, legend: { data: ['访客人数', '下单人数', '支付人数', 'Line 4', 'Line 5'] // data: ['访客人数','下单人数','支付人数'] }, toolbox: { feature: { saveAsImage: {} } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] } ], yAxis: [ { type: 'value', splitLine:{ show:true, lineStyle:{ type:'dashed',//背景色为虚线, color:'#256980' } } } ], series: [ { name: '访客人数', type: 'line', stack: 'Total', smooth: true, lineStyle: { width: 0 }, showSymbol: false, areaStyle: { opacity: 0.8, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#18394A' }, { offset: 1, color: '#2885A4' } ]) }, emphasis: { focus: 'series' }, data: [140, 232, 101, 264, 90, 340, 250] }, { name: '下单人数', type: 'line', stack: 'Total', smooth: true, lineStyle: { width: 0 }, showSymbol: false, areaStyle: { opacity: 0.8, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#004367' }, { offset: 1, color: '#005886' } ]) }, emphasis: { focus: 'series' }, data: [120, 282, 111, 234, 220, 340, 310] }, { name: '支付人数', type: 'line', stack: 'Total', smooth: true, lineStyle: { width: 0 }, showSymbol: false, areaStyle: { opacity: 0.8, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#5A3A37' }, { offset: 1, color: '#355969' } ]) }, emphasis: { focus: 'series' }, data: [320, 132, 201, 334, 190, 130, 220] }, ] }, } export default optins