| | |
|---|
| | | |
|---|
| | | $(function () { |
|---|
| | | echarts_1(); |
|---|
| | | echarts_4(); |
|---|
| | | function echarts_1() { |
|---|
| | | $(function () { |
|---|
| | | echarts_1(); |
|---|
| | | //echarts_4(); |
|---|
| | | |
|---|
| | | function echarts_1() { |
|---|
| | | // 基于准备好的dom，初始化echarts实例 |
|---|
| | | var myChart = echarts.init(document.getElementById('echart1')); |
|---|
| | | |
|---|
| | | option = { |
|---|
| | | // backgroundColor: '#00265f', |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis', |
|---|
| | | axisPointer: { |
|---|
| | | type: 'shadow' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | grid: { |
|---|
| | | left: '0%', |
|---|
| | | top:'10px', |
|---|
| | | right: '0%', |
|---|
| | | bottom: '4%', |
|---|
| | | containLabel: true |
|---|
| | | }, |
|---|
| | | xAxis: [{ |
|---|
| | | type: 'category', |
|---|
| | | data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], |
|---|
| | | axisLine: { |
|---|
| | | show: true, |
|---|
| | | lineStyle: { |
|---|
| | | color: "rgba(255,255,255,.1)", |
|---|
| | | width: 1, |
|---|
| | | type: "solid" |
|---|
| | | option = { |
|---|
| | | // backgroundColor: '#00265f', |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis', |
|---|
| | | axisPointer: { |
|---|
| | | type: 'shadow' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | axisTick: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | interval: 0, |
|---|
| | | // rotate:50, |
|---|
| | | show: true, |
|---|
| | | splitNumber: 15, |
|---|
| | | textStyle: { |
|---|
| | | color: "rgba(255,255,255,.6)", |
|---|
| | | fontSize: '12', |
|---|
| | | grid: { |
|---|
| | | left: '0%', |
|---|
| | | top: '10px', |
|---|
| | | right: '0%', |
|---|
| | | bottom: '4%', |
|---|
| | | containLabel: true |
|---|
| | | }, |
|---|
| | | xAxis: [{ |
|---|
| | | type: 'category', |
|---|
| | | data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], |
|---|
| | | axisLine: { |
|---|
| | | show: true, |
|---|
| | | lineStyle: { |
|---|
| | | color: "rgba(255,255,255,.1)", |
|---|
| | | width: 1, |
|---|
| | | type: "solid" |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }], |
|---|
| | | yAxis: [{ |
|---|
| | | type: 'value', |
|---|
| | | axisLabel: { |
|---|
| | | //formatter: '{value} %' |
|---|
| | | show:true, |
|---|
| | | textStyle: { |
|---|
| | | color: "rgba(255,255,255,.6)", |
|---|
| | | fontSize: '12', |
|---|
| | | |
|---|
| | | axisTick: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | axisTick: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | show: true, |
|---|
| | | lineStyle: { |
|---|
| | | color: "rgba(255,255,255,.1 )", |
|---|
| | | width: 1, |
|---|
| | | type: "solid" |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: "rgba(255,255,255,.1)", |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }], |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | type: 'bar', |
|---|
| | | data: [200, 300, 300, 900, 1500, 1200, 600], |
|---|
| | | barWidth:'35%', //柱子宽度 |
|---|
| | | // barGap: 1, //柱子之间间距 |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color:'#2f89cf', |
|---|
| | | opacity: 1, |
|---|
| | | barBorderRadius: 5, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | ] |
|---|
| | | }; |
|---|
| | | |
|---|
| | | axisLabel: { |
|---|
| | | interval: 0, |
|---|
| | | // rotate:50, |
|---|
| | | show: true, |
|---|
| | | splitNumber: 15, |
|---|
| | | textStyle: { |
|---|
| | | color: "rgba(255,255,255,.6)", |
|---|
| | | fontSize: '12', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }], |
|---|
| | | yAxis: [{ |
|---|
| | | type: 'value', |
|---|
| | | axisLabel: { |
|---|
| | | //formatter: '{value} %' |
|---|
| | | show: true, |
|---|
| | | textStyle: { |
|---|
| | | color: "rgba(255,255,255,.6)", |
|---|
| | | fontSize: '12', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | axisTick: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | show: true, |
|---|
| | | lineStyle: { |
|---|
| | | color: "rgba(255,255,255,.1 )", |
|---|
| | | width: 1, |
|---|
| | | type: "solid" |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: "rgba(255,255,255,.1)", |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }], |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | type: 'bar', |
|---|
| | | data: [200, 300, 300, 900, 1500, 1200, 600], |
|---|
| | | barWidth: '35%', //柱子宽度 |
|---|
| | | // barGap: 1, //柱子之间间距 |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: '#2f89cf', |
|---|
| | | opacity: 1, |
|---|
| | | barBorderRadius: 5, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | ] |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // 使用刚指定的配置项和数据显示图表。 |
|---|
| | | myChart.setOption(option); |
|---|
| | | window.addEventListener("resize",function(){ |
|---|
| | | window.addEventListener("resize", function () { |
|---|
| | | myChart.resize(); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | function echarts_2() { |
|---|
| | | |
|---|
| | | function echarts_2() { |
|---|
| | | // 基于准备好的dom，初始化echarts实例 |
|---|
| | | var myChart = echarts.init(document.getElementById('echart2')); |
|---|
| | | |
|---|
| | | option = { |
|---|
| | | // backgroundColor: '#00265f', |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis', |
|---|
| | | axisPointer: { type: 'shadow'} |
|---|
| | | }, |
|---|
| | | grid: { |
|---|
| | | left: '0%', |
|---|
| | | top:'10px', |
|---|
| | | right: '0%', |
|---|
| | | bottom: '4%', |
|---|
| | | containLabel: true |
|---|
| | | }, |
|---|
| | | xAxis: [{ |
|---|
| | | type: 'category', |
|---|
| | | data: ['浙江', '上海', '江苏', '广东', '北京', '深圳', '安徽'], |
|---|
| | | axisLine: { |
|---|
| | | show: true, |
|---|
| | | lineStyle: { |
|---|
| | | color: "rgba(255,255,255,.1)", |
|---|
| | | width: 1, |
|---|
| | | type: "solid" |
|---|
| | | option = { |
|---|
| | | // backgroundColor: '#00265f', |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis', |
|---|
| | | axisPointer: {type: 'shadow'} |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | axisTick: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | interval: 0, |
|---|
| | | // rotate:50, |
|---|
| | | show: true, |
|---|
| | | splitNumber: 15, |
|---|
| | | textStyle: { |
|---|
| | | color: "rgba(255,255,255,.6)", |
|---|
| | | fontSize: '12', |
|---|
| | | grid: { |
|---|
| | | left: '0%', |
|---|
| | | top: '10px', |
|---|
| | | right: '0%', |
|---|
| | | bottom: '4%', |
|---|
| | | containLabel: true |
|---|
| | | }, |
|---|
| | | xAxis: [{ |
|---|
| | | type: 'category', |
|---|
| | | data: ['浙江', '上海', '江苏', '广东', '北京', '深圳', '安徽'], |
|---|
| | | axisLine: { |
|---|
| | | show: true, |
|---|
| | | lineStyle: { |
|---|
| | | color: "rgba(255,255,255,.1)", |
|---|
| | | width: 1, |
|---|
| | | type: "solid" |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }], |
|---|
| | | yAxis: [{ |
|---|
| | | type: 'value', |
|---|
| | | axisLabel: { |
|---|
| | | //formatter: '{value} %' |
|---|
| | | show:true, |
|---|
| | | textStyle: { |
|---|
| | | color: "rgba(255,255,255,.6)", |
|---|
| | | fontSize: '12', |
|---|
| | | |
|---|
| | | axisTick: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | axisTick: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | show: true, |
|---|
| | | lineStyle: { |
|---|
| | | color: "rgba(255,255,255,.1 )", |
|---|
| | | width: 1, |
|---|
| | | type: "solid" |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: "rgba(255,255,255,.1)", |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }], |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | |
|---|
| | | type: 'bar', |
|---|
| | | data: [1500, 1200, 600, 200, 300, 300, 900], |
|---|
| | | barWidth:'35%', //柱子宽度 |
|---|
| | | // barGap: 1, //柱子之间间距 |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color:'#27d08a', |
|---|
| | | opacity: 1, |
|---|
| | | barBorderRadius: 5, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | ] |
|---|
| | | }; |
|---|
| | | |
|---|
| | | axisLabel: { |
|---|
| | | interval: 0, |
|---|
| | | // rotate:50, |
|---|
| | | show: true, |
|---|
| | | splitNumber: 15, |
|---|
| | | textStyle: { |
|---|
| | | color: "rgba(255,255,255,.6)", |
|---|
| | | fontSize: '12', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }], |
|---|
| | | yAxis: [{ |
|---|
| | | type: 'value', |
|---|
| | | axisLabel: { |
|---|
| | | //formatter: '{value} %' |
|---|
| | | show: true, |
|---|
| | | textStyle: { |
|---|
| | | color: "rgba(255,255,255,.6)", |
|---|
| | | fontSize: '12', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | axisTick: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | show: true, |
|---|
| | | lineStyle: { |
|---|
| | | color: "rgba(255,255,255,.1 )", |
|---|
| | | width: 1, |
|---|
| | | type: "solid" |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: "rgba(255,255,255,.1)", |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }], |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | |
|---|
| | | type: 'bar', |
|---|
| | | data: [1500, 1200, 600, 200, 300, 300, 900], |
|---|
| | | barWidth: '35%', //柱子宽度 |
|---|
| | | // barGap: 1, //柱子之间间距 |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: '#27d08a', |
|---|
| | | opacity: 1, |
|---|
| | | barBorderRadius: 5, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | ] |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // 使用刚指定的配置项和数据显示图表。 |
|---|
| | | myChart.setOption(option); |
|---|
| | | window.addEventListener("resize",function(){ |
|---|
| | | window.addEventListener("resize", function () { |
|---|
| | | myChart.resize(); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | function echarts_5() { |
|---|
| | | |
|---|
| | | function echarts_5() { |
|---|
| | | // 基于准备好的dom，初始化echarts实例 |
|---|
| | | var myChart = echarts.init(document.getElementById('echart5')); |
|---|
| | | |
|---|
| | | option = { |
|---|
| | | // backgroundColor: '#00265f', |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis', |
|---|
| | | axisPointer: { |
|---|
| | | type: 'shadow' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | grid: { |
|---|
| | | left: '0%', |
|---|
| | | top:'10px', |
|---|
| | | right: '0%', |
|---|
| | | bottom: '2%', |
|---|
| | | containLabel: true |
|---|
| | | }, |
|---|
| | | xAxis: [{ |
|---|
| | | type: 'category', |
|---|
| | | data: ['浙江', '上海', '江苏', '广东', '北京', '深圳', '安徽', '四川'], |
|---|
| | | axisLine: { |
|---|
| | | show: true, |
|---|
| | | lineStyle: { |
|---|
| | | color: "rgba(255,255,255,.1)", |
|---|
| | | width: 1, |
|---|
| | | type: "solid" |
|---|
| | | option = { |
|---|
| | | // backgroundColor: '#00265f', |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis', |
|---|
| | | axisPointer: { |
|---|
| | | type: 'shadow' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | axisTick: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | interval: 0, |
|---|
| | | // rotate:50, |
|---|
| | | show: true, |
|---|
| | | splitNumber: 15, |
|---|
| | | textStyle: { |
|---|
| | | color: "rgba(255,255,255,.6)", |
|---|
| | | fontSize: '12', |
|---|
| | | |
|---|
| | | grid: { |
|---|
| | | left: '0%', |
|---|
| | | top: '10px', |
|---|
| | | right: '0%', |
|---|
| | | bottom: '2%', |
|---|
| | | containLabel: true |
|---|
| | | }, |
|---|
| | | xAxis: [{ |
|---|
| | | type: 'category', |
|---|
| | | data: ['浙江', '上海', '江苏', '广东', '北京', '深圳', '安徽', '四川'], |
|---|
| | | axisLine: { |
|---|
| | | show: true, |
|---|
| | | lineStyle: { |
|---|
| | | color: "rgba(255,255,255,.1)", |
|---|
| | | width: 1, |
|---|
| | | type: "solid" |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }], |
|---|
| | | yAxis: [{ |
|---|
| | | type: 'value', |
|---|
| | | axisLabel: { |
|---|
| | | //formatter: '{value} %' |
|---|
| | | show:true, |
|---|
| | | textStyle: { |
|---|
| | | color: "rgba(255,255,255,.6)", |
|---|
| | | fontSize: '12', |
|---|
| | | |
|---|
| | | axisTick: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | axisTick: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | show: true, |
|---|
| | | lineStyle: { |
|---|
| | | color: "rgba(255,255,255,.1 )", |
|---|
| | | width: 1, |
|---|
| | | type: "solid" |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: "rgba(255,255,255,.1)", |
|---|
| | | axisLabel: { |
|---|
| | | interval: 0, |
|---|
| | | // rotate:50, |
|---|
| | | show: true, |
|---|
| | | splitNumber: 15, |
|---|
| | | textStyle: { |
|---|
| | | color: "rgba(255,255,255,.6)", |
|---|
| | | fontSize: '12', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }], |
|---|
| | | yAxis: [{ |
|---|
| | | type: 'value', |
|---|
| | | axisLabel: { |
|---|
| | | //formatter: '{value} %' |
|---|
| | | show: true, |
|---|
| | | textStyle: { |
|---|
| | | color: "rgba(255,255,255,.6)", |
|---|
| | | fontSize: '12', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | axisTick: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | show: true, |
|---|
| | | lineStyle: { |
|---|
| | | color: "rgba(255,255,255,.1 )", |
|---|
| | | width: 1, |
|---|
| | | type: "solid" |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: "rgba(255,255,255,.1)", |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }], |
|---|
| | | series: [{ |
|---|
| | | type: 'bar', |
|---|
| | | data: [2, 3, 3, 9, 15, 12, 6, 4, 6, 7, 4, 10], |
|---|
| | | barWidth: '35%', //柱子宽度 |
|---|
| | | // barGap: 1, //柱子之间间距 |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: '#2f89cf', |
|---|
| | | opacity: 1, |
|---|
| | | barBorderRadius: 5, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }], |
|---|
| | | series: [{ |
|---|
| | | type: 'bar', |
|---|
| | | data: [2, 3, 3, 9, 15, 12, 6, 4, 6, 7, 4, 10], |
|---|
| | | barWidth:'35%', //柱子宽度 |
|---|
| | | // barGap: 1, //柱子之间间距 |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color:'#2f89cf', |
|---|
| | | opacity: 1, |
|---|
| | | barBorderRadius: 5, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }; |
|---|
| | | |
|---|
| | | ] |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // 使用刚指定的配置项和数据显示图表。 |
|---|
| | | myChart.setOption(option); |
|---|
| | | window.addEventListener("resize",function(){ |
|---|
| | | window.addEventListener("resize", function () { |
|---|
| | | myChart.resize(); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | function echarts_4() { |
|---|
| | | |
|---|
| | | function echarts_4() { |
|---|
| | | // 基于准备好的dom，初始化echarts实例 |
|---|
| | | var myChart = echarts.init(document.getElementById('echart4')); |
|---|
| | | |
|---|
| | | option = { |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis', |
|---|
| | | axisPointer: { |
|---|
| | | lineStyle: { |
|---|
| | | color: '#dddc6b' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | legend: { |
|---|
| | | top:'0%', |
|---|
| | | data:['安卓','IOS'], |
|---|
| | | textStyle: { |
|---|
| | | color: 'rgba(255,255,255,.5)', |
|---|
| | | fontSize:'12', |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | grid: { |
|---|
| | | left: '10', |
|---|
| | | top: '30', |
|---|
| | | right: '10', |
|---|
| | | bottom: '10', |
|---|
| | | containLabel: true |
|---|
| | | }, |
|---|
| | | |
|---|
| | | xAxis: [{ |
|---|
| | | type: 'category', |
|---|
| | | boundaryGap: false, |
|---|
| | | axisLabel: { |
|---|
| | | textStyle: { |
|---|
| | | color: "rgba(255,255,255,.6)", |
|---|
| | | fontSize:12, |
|---|
| | | }, |
|---|
| | | option = { |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis', |
|---|
| | | axisPointer: { |
|---|
| | | lineStyle: { |
|---|
| | | color: '#dddc6b' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: 'rgba(255,255,255,.2)' |
|---|
| | | } |
|---|
| | | |
|---|
| | | }, |
|---|
| | | |
|---|
| | | data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], |
|---|
| | | |
|---|
| | | }, { |
|---|
| | | |
|---|
| | | axisPointer: {show: false}, |
|---|
| | | axisLine: { show: false}, |
|---|
| | | position: 'bottom', |
|---|
| | | offset: 20, |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | }], |
|---|
| | | |
|---|
| | | yAxis: [{ |
|---|
| | | type: 'value', |
|---|
| | | axisTick: {show: false}, |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: 'rgba(255,255,255,.1)' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | legend: { |
|---|
| | | top: '0%', |
|---|
| | | data: ['规划量'], |
|---|
| | | textStyle: { |
|---|
| | | color: "rgba(255,255,255,.6)", |
|---|
| | | fontSize:12, |
|---|
| | | }, |
|---|
| | | color: 'rgba(255,255,255,.5)', |
|---|
| | | fontSize: '12', |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | grid: { |
|---|
| | | left: '10', |
|---|
| | | top: '30', |
|---|
| | | right: '10', |
|---|
| | | bottom: '10', |
|---|
| | | containLabel: true |
|---|
| | | }, |
|---|
| | | |
|---|
| | | splitLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: 'rgba(255,255,255,.1)' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }], |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: '安卓', |
|---|
| | | type: 'line', |
|---|
| | | smooth: true, |
|---|
| | | symbol: 'circle', |
|---|
| | | symbolSize: 5, |
|---|
| | | showSymbol: false, |
|---|
| | | lineStyle: { |
|---|
| | | |
|---|
| | | normal: { |
|---|
| | | color: '#0184d5', |
|---|
| | | width: 2 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | areaStyle: { |
|---|
| | | normal: { |
|---|
| | | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
|---|
| | | offset: 0, |
|---|
| | | color: 'rgba(1, 132, 213, 0.4)' |
|---|
| | | }, { |
|---|
| | | offset: 0.8, |
|---|
| | | color: 'rgba(1, 132, 213, 0.1)' |
|---|
| | | }], false), |
|---|
| | | shadowColor: 'rgba(0, 0, 0, 0.1)', |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: '#0184d5', |
|---|
| | | borderColor: 'rgba(221, 220, 107, .1)', |
|---|
| | | borderWidth: 12 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data: [3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4,3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4] |
|---|
| | | xAxis: [{ |
|---|
| | | type: 'category', |
|---|
| | | boundaryGap: false, |
|---|
| | | axisLabel: { |
|---|
| | | textStyle: { |
|---|
| | | color: "rgba(255,255,255,.6)", |
|---|
| | | fontSize: 12, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: 'rgba(255,255,255,.2)' |
|---|
| | | } |
|---|
| | | |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: 'IOS', |
|---|
| | | type: 'line', |
|---|
| | | smooth: true, |
|---|
| | | symbol: 'circle', |
|---|
| | | symbolSize: 5, |
|---|
| | | showSymbol: false, |
|---|
| | | lineStyle: { |
|---|
| | | |
|---|
| | | normal: { |
|---|
| | | color: '#00d887', |
|---|
| | | width: 2 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | areaStyle: { |
|---|
| | | normal: { |
|---|
| | | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
|---|
| | | offset: 0, |
|---|
| | | color: 'rgba(0, 216, 135, 0.4)' |
|---|
| | | }, { |
|---|
| | | offset: 0.8, |
|---|
| | | color: 'rgba(0, 216, 135, 0.1)' |
|---|
| | | }], false), |
|---|
| | | shadowColor: 'rgba(0, 0, 0, 0.1)', |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: '#00d887', |
|---|
| | | borderColor: 'rgba(221, 220, 107, .1)', |
|---|
| | | borderWidth: 12 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data: [5, 3, 5, 6, 1, 5, 3, 5, 6, 4, 6, 4, 8, 3, 5, 6, 1, 5, 3, 7, 2, 5, 1, 4] |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }, |
|---|
| | | |
|---|
| | | ] |
|---|
| | | data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], |
|---|
| | | |
|---|
| | | }; |
|---|
| | | |
|---|
| | | }, { |
|---|
| | | |
|---|
| | | axisPointer: {show: false}, |
|---|
| | | axisLine: {show: false}, |
|---|
| | | position: 'bottom', |
|---|
| | | offset: 20, |
|---|
| | | |
|---|
| | | |
|---|
| | | }], |
|---|
| | | |
|---|
| | | yAxis: [{ |
|---|
| | | type: 'value', |
|---|
| | | axisTick: {show: false}, |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: 'rgba(255,255,255,.1)' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | textStyle: { |
|---|
| | | color: "rgba(255,255,255,.6)", |
|---|
| | | fontSize: 12, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | splitLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: 'rgba(255,255,255,.1)' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }], |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: '规划量', |
|---|
| | | type: 'line', |
|---|
| | | smooth: true, |
|---|
| | | symbol: 'circle', |
|---|
| | | symbolSize: 5, |
|---|
| | | showSymbol: false, |
|---|
| | | lineStyle: { |
|---|
| | | |
|---|
| | | normal: { |
|---|
| | | color: '#00d887', |
|---|
| | | width: 2 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | areaStyle: { |
|---|
| | | normal: { |
|---|
| | | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
|---|
| | | offset: 0, |
|---|
| | | color: 'rgba(0, 216, 135, 0.4)' |
|---|
| | | }, { |
|---|
| | | offset: 0.8, |
|---|
| | | color: 'rgba(0, 216, 135, 0.1)' |
|---|
| | | }], false), |
|---|
| | | shadowColor: 'rgba(0, 0, 0, 0.1)', |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: '#00d887', |
|---|
| | | borderColor: 'rgba(221, 220, 107, .1)', |
|---|
| | | borderWidth: 12 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data: [1,2,3,4,5,6,7,8,9,10,11,12] |
|---|
| | | |
|---|
| | | }, |
|---|
| | | |
|---|
| | | ] |
|---|
| | | |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // 使用刚指定的配置项和数据显示图表。 |
|---|
| | | myChart.setOption(option); |
|---|
| | | window.addEventListener("resize",function(){ |
|---|
| | | window.addEventListener("resize", function () { |
|---|
| | | myChart.resize(); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | function echarts_6() { |
|---|
| | | |
|---|
| | | function echarts_6() { |
|---|
| | | // 基于准备好的dom，初始化echarts实例 |
|---|
| | | var myChart = echarts.init(document.getElementById('echart6')); |
|---|
| | | |
|---|
| | | var dataStyle = { |
|---|
| | | normal: { |
|---|
| | | label: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | labelLine: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | //shadowBlur: 40, |
|---|
| | | //shadowColor: 'rgba(40, 40, 40, 1)', |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | var placeHolderStyle = { |
|---|
| | | normal: { |
|---|
| | | color: 'rgba(255,255,255,.05)', |
|---|
| | | label: {show: false,}, |
|---|
| | | labelLine: {show: false} |
|---|
| | | }, |
|---|
| | | emphasis: { |
|---|
| | | color: 'rgba(0,0,0,0)' |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | option = { |
|---|
| | | color: ['#0f63d6', '#0f78d6', '#0f8cd6', '#0fa0d6', '#0fb4d6'], |
|---|
| | | tooltip: { |
|---|
| | | show: true, |
|---|
| | | formatter: "{a} : {c} " |
|---|
| | | }, |
|---|
| | | legend: { |
|---|
| | | itemWidth: 10, |
|---|
| | | itemHeight: 10, |
|---|
| | | itemGap: 12, |
|---|
| | | bottom: '3%', |
|---|
| | | |
|---|
| | | data: ['浙江', '上海', '广东', '北京', '深圳'], |
|---|
| | | textStyle: { |
|---|
| | | normal: { |
|---|
| | | label: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | labelLine: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | //shadowBlur: 40, |
|---|
| | | //shadowColor: 'rgba(40, 40, 40, 1)', |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | var placeHolderStyle = { |
|---|
| | | normal: { |
|---|
| | | color: 'rgba(255,255,255,.05)', |
|---|
| | | label: {show: false,}, |
|---|
| | | labelLine: {show: false} |
|---|
| | | }, |
|---|
| | | emphasis: { |
|---|
| | | color: 'rgba(0,0,0,0)' |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | option = { |
|---|
| | | color: ['#0f63d6', '#0f78d6', '#0f8cd6', '#0fa0d6', '#0fb4d6'], |
|---|
| | | tooltip: { |
|---|
| | | show: true, |
|---|
| | | formatter: "{a} : {c} " |
|---|
| | | }, |
|---|
| | | legend: { |
|---|
| | | itemWidth: 10, |
|---|
| | | itemHeight: 10, |
|---|
| | | itemGap: 12, |
|---|
| | | bottom: '3%', |
|---|
| | | |
|---|
| | | data: ['浙江', '上海', '广东', '北京', '深圳'], |
|---|
| | | textStyle: { |
|---|
| | | color: 'rgba(255,255,255,.6)', |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: '浙江', |
|---|
| | | type: 'pie', |
|---|
| | | clockWise: false, |
|---|
| | | center: ['50%', '42%'], |
|---|
| | | radius: ['59%', '70%'], |
|---|
| | | itemStyle: dataStyle, |
|---|
| | | hoverAnimation: false, |
|---|
| | | data: [{ |
|---|
| | | value: 80, |
|---|
| | | name: '01' |
|---|
| | | }, { |
|---|
| | | value: 20, |
|---|
| | | name: 'invisible', |
|---|
| | | tooltip: {show: false}, |
|---|
| | | itemStyle: placeHolderStyle |
|---|
| | | }] |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '上海', |
|---|
| | | type: 'pie', |
|---|
| | | clockWise: false, |
|---|
| | | center: ['50%', '42%'], |
|---|
| | | radius: ['49%', '60%'], |
|---|
| | | itemStyle: dataStyle, |
|---|
| | | hoverAnimation: false, |
|---|
| | | data: [{ |
|---|
| | | value: 70, |
|---|
| | | name: '02' |
|---|
| | | }, { |
|---|
| | | value: 30, |
|---|
| | | name: 'invisible', |
|---|
| | | tooltip: {show: false}, |
|---|
| | | itemStyle: placeHolderStyle |
|---|
| | | }] |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '广东', |
|---|
| | | type: 'pie', |
|---|
| | | clockWise: false, |
|---|
| | | hoverAnimation: false, |
|---|
| | | center: ['50%', '42%'], |
|---|
| | | radius: ['39%', '50%'], |
|---|
| | | itemStyle: dataStyle, |
|---|
| | | data: [{ |
|---|
| | | value: 65, |
|---|
| | | name: '03' |
|---|
| | | }, { |
|---|
| | | value: 35, |
|---|
| | | name: 'invisible', |
|---|
| | | tooltip: {show: false}, |
|---|
| | | itemStyle: placeHolderStyle |
|---|
| | | }] |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '北京', |
|---|
| | | type: 'pie', |
|---|
| | | clockWise: false, |
|---|
| | | hoverAnimation: false, |
|---|
| | | center: ['50%', '42%'], |
|---|
| | | radius: ['29%', '40%'], |
|---|
| | | itemStyle: dataStyle, |
|---|
| | | data: [{ |
|---|
| | | value: 60, |
|---|
| | | name: '04' |
|---|
| | | }, { |
|---|
| | | value: 40, |
|---|
| | | name: 'invisible', |
|---|
| | | tooltip: {show: false}, |
|---|
| | | itemStyle: placeHolderStyle |
|---|
| | | }] |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '深圳', |
|---|
| | | type: 'pie', |
|---|
| | | clockWise: false, |
|---|
| | | hoverAnimation: false, |
|---|
| | | center: ['50%', '42%'], |
|---|
| | | radius: ['20%', '30%'], |
|---|
| | | itemStyle: dataStyle, |
|---|
| | | data: [{ |
|---|
| | | value: 50, |
|---|
| | | name: '05' |
|---|
| | | }, { |
|---|
| | | value: 50, |
|---|
| | | name: 'invisible', |
|---|
| | | tooltip: {show: false}, |
|---|
| | | itemStyle: placeHolderStyle |
|---|
| | | }] |
|---|
| | | }, ] |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // 使用刚指定的配置项和数据显示图表。 |
|---|
| | | myChart.setOption(option); |
|---|
| | | window.addEventListener("resize",function(){ |
|---|
| | | myChart.resize(); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | function echarts_31() { |
|---|
| | | // 基于准备好的dom，初始化echarts实例 |
|---|
| | | var myChart = echarts.init(document.getElementById('fb1')); |
|---|
| | | option = { |
|---|
| | | |
|---|
| | | title: [{ |
|---|
| | | text: '年龄分布', |
|---|
| | | left: 'center', |
|---|
| | | textStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | fontSize:'16' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }], |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'item', |
|---|
| | | formatter: "{a} <br/>{b}: {c} ({d}%)", |
|---|
| | | position:function(p){ //其中p为当前鼠标的位置 |
|---|
| | | return [p[0] + 10, p[1] - 10]; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | legend: { |
|---|
| | | |
|---|
| | | top:'70%', |
|---|
| | | itemWidth: 10, |
|---|
| | | itemHeight: 10, |
|---|
| | | data:['0岁以下','20-29岁','30-39岁','40-49岁','50岁以上'], |
|---|
| | | textStyle: { |
|---|
| | | color: 'rgba(255,255,255,.5)', |
|---|
| | | fontSize:'12', |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name:'年龄分布', |
|---|
| | | type:'pie', |
|---|
| | | center: ['50%', '42%'], |
|---|
| | | radius: ['40%', '60%'], |
|---|
| | | color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'], |
|---|
| | | label: {show:false}, |
|---|
| | | labelLine: {show:false}, |
|---|
| | | data:[ |
|---|
| | | {value:1, name:'0岁以下'}, |
|---|
| | | {value:4, name:'20-29岁'}, |
|---|
| | | {value:2, name:'30-39岁'}, |
|---|
| | | {value:2, name:'40-49岁'}, |
|---|
| | | {value:1, name:'50岁以上'}, |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }; |
|---|
| | | |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: '浙江', |
|---|
| | | type: 'pie', |
|---|
| | | clockWise: false, |
|---|
| | | center: ['50%', '42%'], |
|---|
| | | radius: ['59%', '70%'], |
|---|
| | | itemStyle: dataStyle, |
|---|
| | | hoverAnimation: false, |
|---|
| | | data: [{ |
|---|
| | | value: 80, |
|---|
| | | name: '01' |
|---|
| | | }, { |
|---|
| | | value: 20, |
|---|
| | | name: 'invisible', |
|---|
| | | tooltip: {show: false}, |
|---|
| | | itemStyle: placeHolderStyle |
|---|
| | | }] |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '上海', |
|---|
| | | type: 'pie', |
|---|
| | | clockWise: false, |
|---|
| | | center: ['50%', '42%'], |
|---|
| | | radius: ['49%', '60%'], |
|---|
| | | itemStyle: dataStyle, |
|---|
| | | hoverAnimation: false, |
|---|
| | | data: [{ |
|---|
| | | value: 70, |
|---|
| | | name: '02' |
|---|
| | | }, { |
|---|
| | | value: 30, |
|---|
| | | name: 'invisible', |
|---|
| | | tooltip: {show: false}, |
|---|
| | | itemStyle: placeHolderStyle |
|---|
| | | }] |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '广东', |
|---|
| | | type: 'pie', |
|---|
| | | clockWise: false, |
|---|
| | | hoverAnimation: false, |
|---|
| | | center: ['50%', '42%'], |
|---|
| | | radius: ['39%', '50%'], |
|---|
| | | itemStyle: dataStyle, |
|---|
| | | data: [{ |
|---|
| | | value: 65, |
|---|
| | | name: '03' |
|---|
| | | }, { |
|---|
| | | value: 35, |
|---|
| | | name: 'invisible', |
|---|
| | | tooltip: {show: false}, |
|---|
| | | itemStyle: placeHolderStyle |
|---|
| | | }] |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '北京', |
|---|
| | | type: 'pie', |
|---|
| | | clockWise: false, |
|---|
| | | hoverAnimation: false, |
|---|
| | | center: ['50%', '42%'], |
|---|
| | | radius: ['29%', '40%'], |
|---|
| | | itemStyle: dataStyle, |
|---|
| | | data: [{ |
|---|
| | | value: 60, |
|---|
| | | name: '04' |
|---|
| | | }, { |
|---|
| | | value: 40, |
|---|
| | | name: 'invisible', |
|---|
| | | tooltip: {show: false}, |
|---|
| | | itemStyle: placeHolderStyle |
|---|
| | | }] |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '深圳', |
|---|
| | | type: 'pie', |
|---|
| | | clockWise: false, |
|---|
| | | hoverAnimation: false, |
|---|
| | | center: ['50%', '42%'], |
|---|
| | | radius: ['20%', '30%'], |
|---|
| | | itemStyle: dataStyle, |
|---|
| | | data: [{ |
|---|
| | | value: 50, |
|---|
| | | name: '05' |
|---|
| | | }, { |
|---|
| | | value: 50, |
|---|
| | | name: 'invisible', |
|---|
| | | tooltip: {show: false}, |
|---|
| | | itemStyle: placeHolderStyle |
|---|
| | | }] |
|---|
| | | },] |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // 使用刚指定的配置项和数据显示图表。 |
|---|
| | | myChart.setOption(option); |
|---|
| | | window.addEventListener("resize",function(){ |
|---|
| | | window.addEventListener("resize", function () { |
|---|
| | | myChart.resize(); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | function echarts_32() { |
|---|
| | | |
|---|
| | | function echarts_31() { |
|---|
| | | // 基于准备好的dom，初始化echarts实例 |
|---|
| | | var myChart = echarts.init(document.getElementById('fb1')); |
|---|
| | | option = { |
|---|
| | | |
|---|
| | | title: [{ |
|---|
| | | text: '年龄分布', |
|---|
| | | left: 'center', |
|---|
| | | textStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | fontSize: '16' |
|---|
| | | } |
|---|
| | | |
|---|
| | | }], |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'item', |
|---|
| | | formatter: "{a} <br/>{b}: {c} ({d}%)", |
|---|
| | | position: function (p) { //其中p为当前鼠标的位置 |
|---|
| | | return [p[0] + 10, p[1] - 10]; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | legend: { |
|---|
| | | |
|---|
| | | top: '70%', |
|---|
| | | itemWidth: 10, |
|---|
| | | itemHeight: 10, |
|---|
| | | data: ['0岁以下', '20-29岁', '30-39岁', '40-49岁', '50岁以上'], |
|---|
| | | textStyle: { |
|---|
| | | color: 'rgba(255,255,255,.5)', |
|---|
| | | fontSize: '12', |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: '年龄分布', |
|---|
| | | type: 'pie', |
|---|
| | | center: ['50%', '42%'], |
|---|
| | | radius: ['40%', '60%'], |
|---|
| | | color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'], |
|---|
| | | label: {show: false}, |
|---|
| | | labelLine: {show: false}, |
|---|
| | | data: [ |
|---|
| | | {value: 1, name: '0岁以下'}, |
|---|
| | | {value: 4, name: '20-29岁'}, |
|---|
| | | {value: 2, name: '30-39岁'}, |
|---|
| | | {value: 2, name: '40-49岁'}, |
|---|
| | | {value: 1, name: '50岁以上'}, |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // 使用刚指定的配置项和数据显示图表。 |
|---|
| | | myChart.setOption(option); |
|---|
| | | window.addEventListener("resize", function () { |
|---|
| | | myChart.resize(); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | function echarts_32() { |
|---|
| | | // 基于准备好的dom，初始化echarts实例 |
|---|
| | | var myChart = echarts.init(document.getElementById('fb2')); |
|---|
| | | option = { |
|---|
| | | |
|---|
| | | title: [{ |
|---|
| | | text: '职业分布', |
|---|
| | | left: 'center', |
|---|
| | | textStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | fontSize:'16' |
|---|
| | | } |
|---|
| | | option = { |
|---|
| | | |
|---|
| | | }], |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'item', |
|---|
| | | formatter: "{a} <br/>{b}: {c} ({d}%)", |
|---|
| | | position:function(p){ //其中p为当前鼠标的位置 |
|---|
| | | return [p[0] + 10, p[1] - 10]; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | legend: { |
|---|
| | | |
|---|
| | | top:'70%', |
|---|
| | | itemWidth: 10, |
|---|
| | | itemHeight: 10, |
|---|
| | | data:['电子商务','教育','IT/互联网','金融','学生','其他'], |
|---|
| | | title: [{ |
|---|
| | | text: '职业分布', |
|---|
| | | left: 'center', |
|---|
| | | textStyle: { |
|---|
| | | color: 'rgba(255,255,255,.5)', |
|---|
| | | fontSize:'12', |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name:'年龄分布', |
|---|
| | | type:'pie', |
|---|
| | | center: ['50%', '42%'], |
|---|
| | | radius: ['40%', '60%'], |
|---|
| | | color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'], |
|---|
| | | label: {show:false}, |
|---|
| | | labelLine: {show:false}, |
|---|
| | | data:[ |
|---|
| | | {value:5, name:'电子商务'}, |
|---|
| | | {value:1, name:'教育'}, |
|---|
| | | {value:6, name:'IT/互联网'}, |
|---|
| | | {value:2, name:'金融'}, |
|---|
| | | {value:1, name:'学生'}, |
|---|
| | | {value:1, name:'其他'}, |
|---|
| | | color: '#fff', |
|---|
| | | fontSize: '16' |
|---|
| | | } |
|---|
| | | |
|---|
| | | }], |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'item', |
|---|
| | | formatter: "{a} <br/>{b}: {c} ({d}%)", |
|---|
| | | position: function (p) { //其中p为当前鼠标的位置 |
|---|
| | | return [p[0] + 10, p[1] - 10]; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | legend: { |
|---|
| | | |
|---|
| | | top: '70%', |
|---|
| | | itemWidth: 10, |
|---|
| | | itemHeight: 10, |
|---|
| | | data: ['电子商务', '教育', 'IT/互联网', '金融', '学生', '其他'], |
|---|
| | | textStyle: { |
|---|
| | | color: 'rgba(255,255,255,.5)', |
|---|
| | | fontSize: '12', |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: '年龄分布', |
|---|
| | | type: 'pie', |
|---|
| | | center: ['50%', '42%'], |
|---|
| | | radius: ['40%', '60%'], |
|---|
| | | color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'], |
|---|
| | | label: {show: false}, |
|---|
| | | labelLine: {show: false}, |
|---|
| | | data: [ |
|---|
| | | {value: 5, name: '电子商务'}, |
|---|
| | | {value: 1, name: '教育'}, |
|---|
| | | {value: 6, name: 'IT/互联网'}, |
|---|
| | | {value: 2, name: '金融'}, |
|---|
| | | {value: 1, name: '学生'}, |
|---|
| | | {value: 1, name: '其他'}, |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }; |
|---|
| | | |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // 使用刚指定的配置项和数据显示图表。 |
|---|
| | | myChart.setOption(option); |
|---|
| | | window.addEventListener("resize",function(){ |
|---|
| | | window.addEventListener("resize", function () { |
|---|
| | | myChart.resize(); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | function echarts_33() { |
|---|
| | | |
|---|
| | | function echarts_33() { |
|---|
| | | // 基于准备好的dom，初始化echarts实例 |
|---|
| | | var myChart = echarts.init(document.getElementById('fb3')); |
|---|
| | | option = { |
|---|
| | | title: [{ |
|---|
| | | text: '兴趣分布', |
|---|
| | | left: 'center', |
|---|
| | | textStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | fontSize:'16' |
|---|
| | | } |
|---|
| | | |
|---|
| | | }], |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'item', |
|---|
| | | formatter: "{a} <br/>{b}: {c} ({d}%)", |
|---|
| | | position:function(p){ //其中p为当前鼠标的位置 |
|---|
| | | return [p[0] + 10, p[1] - 10]; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | legend: { |
|---|
| | | top:'70%', |
|---|
| | | itemWidth: 10, |
|---|
| | | itemHeight: 10, |
|---|
| | | data:['汽车','旅游','财经','教育','软件','其他'], |
|---|
| | | option = { |
|---|
| | | title: [{ |
|---|
| | | text: '兴趣分布', |
|---|
| | | left: 'center', |
|---|
| | | textStyle: { |
|---|
| | | color: 'rgba(255,255,255,.5)', |
|---|
| | | fontSize:'12', |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name:'兴趣分布', |
|---|
| | | type:'pie', |
|---|
| | | center: ['50%', '42%'], |
|---|
| | | radius: ['40%', '60%'], |
|---|
| | | color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'], |
|---|
| | | label: {show:false}, |
|---|
| | | labelLine: {show:false}, |
|---|
| | | data:[ |
|---|
| | | {value:2, name:'汽车'}, |
|---|
| | | {value:3, name:'旅游'}, |
|---|
| | | {value:1, name:'财经'}, |
|---|
| | | {value:4, name:'教育'}, |
|---|
| | | {value:8, name:'软件'}, |
|---|
| | | {value:1, name:'其他'}, |
|---|
| | | color: '#fff', |
|---|
| | | fontSize: '16' |
|---|
| | | } |
|---|
| | | |
|---|
| | | }], |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'item', |
|---|
| | | formatter: "{a} <br/>{b}: {c} ({d}%)", |
|---|
| | | position: function (p) { //其中p为当前鼠标的位置 |
|---|
| | | return [p[0] + 10, p[1] - 10]; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | legend: { |
|---|
| | | top: '70%', |
|---|
| | | itemWidth: 10, |
|---|
| | | itemHeight: 10, |
|---|
| | | data: ['汽车', '旅游', '财经', '教育', '软件', '其他'], |
|---|
| | | textStyle: { |
|---|
| | | color: 'rgba(255,255,255,.5)', |
|---|
| | | fontSize: '12', |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: '兴趣分布', |
|---|
| | | type: 'pie', |
|---|
| | | center: ['50%', '42%'], |
|---|
| | | radius: ['40%', '60%'], |
|---|
| | | color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'], |
|---|
| | | label: {show: false}, |
|---|
| | | labelLine: {show: false}, |
|---|
| | | data: [ |
|---|
| | | {value: 2, name: '汽车'}, |
|---|
| | | {value: 3, name: '旅游'}, |
|---|
| | | {value: 1, name: '财经'}, |
|---|
| | | {value: 4, name: '教育'}, |
|---|
| | | {value: 8, name: '软件'}, |
|---|
| | | {value: 1, name: '其他'}, |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }; |
|---|
| | | |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // 使用刚指定的配置项和数据显示图表。 |
|---|
| | | myChart.setOption(option); |
|---|
| | | window.addEventListener("resize",function(){ |
|---|
| | | window.addEventListener("resize", function () { |
|---|
| | | myChart.resize(); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | }) |
|---|
| | | |
|---|
| | | |
|---|
