|
|
@@ -11,23 +11,42 @@
|
|
|
<div class="chart-box">
|
|
|
<div class="chart-box-row">
|
|
|
<div class="chart-box-row-item">
|
|
|
- <div style="height: 100%">
|
|
|
- <highcharts :options="chartOptions"></highcharts>
|
|
|
+ <div class="item-more-button"><span>更多类型</span></div>
|
|
|
+ <div class="item-chart-body">
|
|
|
+ <!--<highcharts class="item-high-chart" :options="supplierTypeChartOptions"></highcharts>-->
|
|
|
+ <div id="supplier-type" class="item-high-chart" :option="supplierTypeOptions"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chart-box-row-item">
|
|
|
+ <div class="item-more-button"><span>更多等级</span></div>
|
|
|
+ <div class="item-chart-body">
|
|
|
+ <!--<highcharts class="item-high-chart" :options="chartOptions"></highcharts>-->
|
|
|
+ <div id="supplier-level" class="item-high-chart" :option="supplierLevelOptions"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="chart-box-row-item"></div>
|
|
|
</div>
|
|
|
<div class="chart-box-row">
|
|
|
- <div class="chart-box-row-item"></div>
|
|
|
- <div class="chart-box-row-item"></div>
|
|
|
+ <div class="chart-box-row-item">
|
|
|
+ <div class="item-more-button"><span>更多准入方式</span></div>
|
|
|
+ <div class="item-chart-body">
|
|
|
+ <!--<highcharts class="item-high-chart" :options="chartOptions"></highcharts>-->
|
|
|
+ <div id="access-type" class="item-high-chart" :option="accessTypeOptions"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chart-box-row-item">
|
|
|
+ <div class="item-more-button"><span>更多规模</span></div>
|
|
|
+ <div class="item-chart-body">
|
|
|
+ <!--<highcharts class="item-high-chart" :options="chartOptions"></highcharts>-->
|
|
|
+ <div id="supplier-scale" class="item-high-chart" style="width: 80%" :option="supplierScaleOption"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import echarts from 'echarts'
|
|
|
-
|
|
|
+ import Highcharts from 'highcharts'
|
|
|
import {
|
|
|
mapGetters
|
|
|
} from 'vuex'
|
|
|
@@ -35,103 +54,10 @@
|
|
|
name: 'index',
|
|
|
data () {
|
|
|
return {
|
|
|
- chartOptions: {
|
|
|
- chart: {
|
|
|
- type: 'pie',
|
|
|
- options3d: {
|
|
|
- enabled: true,
|
|
|
- alpha: 45,
|
|
|
- beta: 0,
|
|
|
- viewDistance: 25
|
|
|
- }
|
|
|
- },
|
|
|
- title: false,
|
|
|
- tooltip: {
|
|
|
- pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
|
|
|
- },
|
|
|
- plotOptions: {
|
|
|
- pie: {
|
|
|
- allowPointSelect: false, // 设置饼图不可点击选择
|
|
|
- cursor: 'pointer',
|
|
|
- depth: 35, // 饼图的厚度
|
|
|
- dataLabels: {
|
|
|
- enabled: false, // 隐藏连线提示
|
|
|
- format: '{point.name}'
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- series: [{
|
|
|
- type: 'pie',
|
|
|
- name: '浏览器占比',
|
|
|
- data: [
|
|
|
- ['Firefox', 45.0],
|
|
|
- ['IE', 26.8],
|
|
|
- {
|
|
|
- name: 'Chrome',
|
|
|
- y: 12.8,
|
|
|
- sliced: false, // 是否默认突出
|
|
|
- selected: true
|
|
|
- },
|
|
|
- ['Safari', 8.5],
|
|
|
- ['Opera', 6.2],
|
|
|
- ['Others', 0.7]
|
|
|
- ]
|
|
|
- }],
|
|
|
- credits: {
|
|
|
- enabled: false // 不显示LOGO
|
|
|
- },
|
|
|
- legend: {
|
|
|
- enabled: true
|
|
|
- }
|
|
|
- },
|
|
|
- todoNumList: {
|
|
|
- newAccess: 0, // 新准入
|
|
|
- append: 0, // 增项
|
|
|
- yearAudit: 0, // 年审
|
|
|
- infoChange: 0, // 信息变更
|
|
|
- business: 0 // 业绩评价
|
|
|
- },
|
|
|
- // 饼状图&柱状图
|
|
|
- deviceChartPie: null,
|
|
|
- deviceChartBar: null,
|
|
|
- // 折线图
|
|
|
- deviceContractLine: null, // 合同
|
|
|
- deviceCustomerLine: null, // 客户
|
|
|
- deviceCollectionline: null, // 样本采集
|
|
|
- devicePrepareline: null, // 制备
|
|
|
- // num: 0,
|
|
|
- usertotal: {},
|
|
|
- user: {
|
|
|
- photo: '',
|
|
|
- name: '',
|
|
|
- Realname: '',
|
|
|
- host: ''
|
|
|
- },
|
|
|
- contracttotal: { // 合同统计
|
|
|
- Total: 0, // 总数
|
|
|
- Inprogress: 0, // 执行中
|
|
|
- Addcontract: 0, // 本月新增
|
|
|
- MonthTotal: [] // 月总数
|
|
|
- },
|
|
|
- customertotal: { // 客户统计
|
|
|
- Total: 0, // 总数
|
|
|
- Addcontract: 0, // 本月新增
|
|
|
- MonthTotal: [] // 月总数
|
|
|
- },
|
|
|
- collectiontotal: { // 样本采集统计
|
|
|
- Total: 0, // 总数
|
|
|
- Addcontract: 0, // 本月新增
|
|
|
- MonthTotal: [] // 月总数
|
|
|
- },
|
|
|
- preparetotal: { // 制备统计
|
|
|
- InPreparation: 0, // 制备中
|
|
|
- EndPreparation: 0, // 制备完成
|
|
|
- MonthTotal: [] // 月总数
|
|
|
- },
|
|
|
- tjzztitles: [], // 样本统计图
|
|
|
- tjzzdata: [], // 样本统计图
|
|
|
- tjdevicex: [], // 容器统计图
|
|
|
- tjdevicey: [], // 容器统计图
|
|
|
+ supplierTypeOptions: null,
|
|
|
+ accessTypeOptions: null,
|
|
|
+ supplierLevelOptions: null,
|
|
|
+ supplierScaleOption: null,
|
|
|
tjdevicecolor: [
|
|
|
'#6A5ACD', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B',
|
|
|
'#60C0DD', '#E87C25', '#27727B', '#FE8463'
|
|
|
@@ -141,279 +67,357 @@
|
|
|
},
|
|
|
created () {
|
|
|
// this.getToDoNumList()
|
|
|
- // this.initData()
|
|
|
- // this.getContractinfo() // 合同统计
|
|
|
- // this.getCustomerinfo() // 客户统计
|
|
|
- // this.getCollectioninfo() // 采集
|
|
|
- // this.getPrepareinfo() // 制备
|
|
|
- let _this = this
|
|
|
- _this.user.photo = _this.authUser.Profile.Photo
|
|
|
- _this.user.name = _this.authUser.Profile.name
|
|
|
- _this.user.Realname = _this.authUser.Profile.Realname
|
|
|
- _this.user.host = _this.authUser.Profile.Host
|
|
|
+ this.getSupplierChart()
|
|
|
},
|
|
|
computed: mapGetters({
|
|
|
authUser: 'authUser'
|
|
|
}),
|
|
|
methods: {
|
|
|
- getToDoNumList () {
|
|
|
- this.$axios.get('/supplier/todo-num', {}).then(res => {
|
|
|
- console.log('待办任务数据返回结果', res)
|
|
|
- })
|
|
|
- },
|
|
|
- initData () {
|
|
|
- let _this = this
|
|
|
- this.$axios.get('/users/getaccountingo', {})
|
|
|
- .then(res => {
|
|
|
- _this.usertotal = res.data
|
|
|
- _this.getgroupzzqg()
|
|
|
- _this.getgroupdevice()
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
- // handle error
|
|
|
- this.downloading = false
|
|
|
- console.error(err)
|
|
|
- })
|
|
|
- },
|
|
|
- toUrl (type) {
|
|
|
- console.log('跳转到：', type)
|
|
|
- },
|
|
|
- // 获取合同信息
|
|
|
- getContractinfo () {
|
|
|
- let _this = this
|
|
|
- this.$axios.get('/cellstotal/getcontractinfo', {})
|
|
|
- .then(res => {
|
|
|
- _this.contracttotal = res.data.items
|
|
|
- _this.contracttotal.Addcontract = _this.contracttotal.MonthTotal[0].Count
|
|
|
- let time = new Array()
|
|
|
- let total = new Array()
|
|
|
- let length = _this.contracttotal.MonthTotal.length
|
|
|
- for (let index = 0; index < length; index++) {
|
|
|
- time[index] = _this.contracttotal.MonthTotal[length - 1 - index].Year + '.' + _this.contracttotal.MonthTotal[
|
|
|
- length - 1 - index].Month
|
|
|
- total[index] = _this.contracttotal.MonthTotal[length - 1 - index].Count
|
|
|
- }
|
|
|
- _this.drawContractline('deviceContractLine', time, total) // 合同
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
- // handle error
|
|
|
- console.error(err)
|
|
|
- })
|
|
|
- },
|
|
|
- // 获取客户信息
|
|
|
- getCustomerinfo () {
|
|
|
- let _this = this
|
|
|
- this.$axios.get('/cellstotal/getcustomerinfo', {})
|
|
|
- .then(res => {
|
|
|
- _this.customertotal = res.data.items
|
|
|
- _this.customertotal.Addcontract = _this.customertotal.MonthTotal[0].Count
|
|
|
- let time = new Array()
|
|
|
- let total = new Array()
|
|
|
- let length = _this.customertotal.MonthTotal.length
|
|
|
- for (let index = 0; index < length; index++) {
|
|
|
- time[index] = _this.customertotal.MonthTotal[length - 1 - index].Year + '.' + _this.customertotal.MonthTotal[
|
|
|
- length - 1 - index].Month
|
|
|
- total[index] = _this.customertotal.MonthTotal[length - 1 - index].Count
|
|
|
- }
|
|
|
- _this.drawContractline('deviceCustomerLine', time, total) // 客户
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
- // handle error
|
|
|
- console.error(err)
|
|
|
- })
|
|
|
- },
|
|
|
- // 获取采集信息
|
|
|
- getCollectioninfo () {
|
|
|
- let _this = this
|
|
|
- this.$axios.get('/cellstotal/getcollectioninfo', {})
|
|
|
- .then(res => {
|
|
|
- _this.collectiontotal = res.data.items
|
|
|
- _this.collectiontotal.Addcontract = _this.collectiontotal.MonthTotal[0].Count
|
|
|
- let time = new Array()
|
|
|
- let total = new Array()
|
|
|
- let length = _this.collectiontotal.MonthTotal.length
|
|
|
- for (let index = 0; index < length; index++) {
|
|
|
- time[index] = _this.collectiontotal.MonthTotal[length - 1 - index].Year + '.' + _this.collectiontotal.MonthTotal[
|
|
|
- length - 1 - index].Month
|
|
|
- total[index] = _this.collectiontotal.MonthTotal[length - 1 - index].Count
|
|
|
- }
|
|
|
- _this.drawContractline('deviceCollectionline', time, total) // 样本采集
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
- // handle error
|
|
|
- console.error(err)
|
|
|
- })
|
|
|
- },
|
|
|
- // 获取制备信息
|
|
|
- getPrepareinfo () {
|
|
|
- let _this = this
|
|
|
- this.$axios.get('/cellstotal/getprepareinfo', {})
|
|
|
- .then(res => {
|
|
|
- _this.preparetotal = res.data.items
|
|
|
- _this.preparetotal.EndPreparation = _this.preparetotal.MonthTotal[0].Count
|
|
|
- let time = new Array()
|
|
|
- let total = new Array()
|
|
|
- let length = _this.preparetotal.MonthTotal.length
|
|
|
- for (let index = 0; index < length; index++) {
|
|
|
- time[index] = _this.preparetotal.MonthTotal[length - 1 - index].Year + '.' + _this.preparetotal.MonthTotal[
|
|
|
- length - 1 - index].Month
|
|
|
- total[index] = _this.preparetotal.MonthTotal[length - 1 - index].Count
|
|
|
- }
|
|
|
- _this.drawContractline('devicePrepareline', time, total) // 制备
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
- // handle error
|
|
|
- console.error(err)
|
|
|
- })
|
|
|
- },
|
|
|
- getgroupzzqg () {
|
|
|
- let _this = this
|
|
|
- _this.$axios.get('/users/gettotalbysampletype', {})
|
|
|
- .then(res => {
|
|
|
- _this.downloading = false
|
|
|
- for (var i = 0; i < res.data.length; i++) {
|
|
|
- if (res.data[i].Name === '') {
|
|
|
- res.data[i].Name = '未知'
|
|
|
+ getSupplierChart () {
|
|
|
+ this.$axios.get('/supplier/statisticalNum', {}).then(res => {
|
|
|
+ console.log('供应商服务商个数', res)
|
|
|
+ this.supplierTypeOptions = Highcharts.chart('supplier-type', {
|
|
|
+ chart: {
|
|
|
+ type: 'pie',
|
|
|
+ marginLeft: 1, // 饼图距左距离
|
|
|
+ options3d: {
|
|
|
+ enabled: true,
|
|
|
+ alpha: 45,
|
|
|
+ beta: 0,
|
|
|
+ viewDistance: 25
|
|
|
}
|
|
|
- if (i < 5) {
|
|
|
- _this.tjzztitles.push({
|
|
|
- name: res.data[i].Name
|
|
|
- })
|
|
|
- _this.tjzzdata.push({
|
|
|
- name: res.data[i].Name,
|
|
|
- value: res.data[i].Num
|
|
|
- })
|
|
|
- } else {
|
|
|
- _this.tjzzdata.push({
|
|
|
- name: res.data[i].Name,
|
|
|
- value: res.data[i].Num
|
|
|
- })
|
|
|
+ },
|
|
|
+ title: false,
|
|
|
+ tooltip: {
|
|
|
+ pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
|
|
|
+ },
|
|
|
+ plotOptions: {
|
|
|
+ pie: {
|
|
|
+ size: '100%', // 饼图大小
|
|
|
+ allowPointSelect: false, // 设置饼图不可点击选择
|
|
|
+ cursor: 'pointer',
|
|
|
+ depth: 35, // 饼图的厚度
|
|
|
+ dataLabels: {
|
|
|
+ enabled: false, // 隐藏连线提示
|
|
|
+ format: '{point.name}'
|
|
|
+ },
|
|
|
+ showInLegend: true,
|
|
|
+ point: {
|
|
|
+ events: {
|
|
|
+ legendItemClick: function (e) {
|
|
|
+ e.preventDefault()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ name: '占比',
|
|
|
+ // #6c757d #007fbb #c7000a
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ name: '供应商 30 家',
|
|
|
+ color: '#60C0DD',
|
|
|
+ y: 30,
|
|
|
+ sliced: false, // 是否默认突出
|
|
|
+ selected: false
|
|
|
+ }, {
|
|
|
+ name: '服务商 12 家',
|
|
|
+ color: '#E87C25',
|
|
|
+ y: 12,
|
|
|
+ sliced: false, // 是否默认突出
|
|
|
+ selected: false
|
|
|
+ }, {
|
|
|
+ name: '承包商 42 家',
|
|
|
+ color: '#007fbb',
|
|
|
+ y: 42,
|
|
|
+ sliced: false, // 是否默认突出
|
|
|
+ selected: false
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }],
|
|
|
+ credits: {
|
|
|
+ enabled: false // 不显示LOGO
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ enabled: true,
|
|
|
+ layout: 'vertical',
|
|
|
+ align: 'right',
|
|
|
+ verticalAlign: 'bottom',
|
|
|
+ borderWidth: 0,
|
|
|
+ borderRadius: 0,
|
|
|
+ itemMarginTop: 10, // 图例每行举上高度
|
|
|
+ itemMarginBottom: 10,
|
|
|
+ itemStyle: {
|
|
|
+ fontWeight: 'bold',
|
|
|
+ fontSize: 18 // 图例项文字大小
|
|
|
+ },
|
|
|
+ squareSymbol: true, // 默认就是true
|
|
|
+ itemDistance: 150, // 图例项间距
|
|
|
+ symbolHeight: 12,
|
|
|
+ symbolWidth: 12,
|
|
|
+ symbolRadius: 1 // 将图例圆角设置为 值越大就变圆点 https://api.highcharts.com.cn/highcharts#legend.symbolRadius
|
|
|
}
|
|
|
- _this.drawPieChart()
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
- // handle error
|
|
|
- _this.downloading = false
|
|
|
- console.error(err)
|
|
|
})
|
|
|
- },
|
|
|
- getgroupdevice () {
|
|
|
- let _this = this
|
|
|
- _this.$axios.get('/users/gettotalbygroupbydevice', {})
|
|
|
- .then(res => {
|
|
|
- for (var i = 0; i < res.data.length; i++) {
|
|
|
- if (res.data[i].Name === '') {
|
|
|
- res.data[i].Name = '未知'
|
|
|
+ this.accessTypeOptions = Highcharts.chart('access-type', {
|
|
|
+ chart: {
|
|
|
+ type: 'pie',
|
|
|
+ marginLeft: 1, // 饼图距左距离
|
|
|
+ options3d: {
|
|
|
+ enabled: true,
|
|
|
+ alpha: 45,
|
|
|
+ beta: 0,
|
|
|
+ viewDistance: 25
|
|
|
}
|
|
|
- if (i > 12) {
|
|
|
- _this.tjdevicecolor.push(_this.tjdevicecolor[i % 12])
|
|
|
+ },
|
|
|
+ title: false,
|
|
|
+ tooltip: {
|
|
|
+ pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
|
|
|
+ },
|
|
|
+ plotOptions: {
|
|
|
+ pie: {
|
|
|
+ size: '100%', // 饼图大小
|
|
|
+ allowPointSelect: false, // 设置饼图不可点击选择
|
|
|
+ cursor: 'pointer',
|
|
|
+ depth: 35, // 饼图的厚度
|
|
|
+ dataLabels: {
|
|
|
+ enabled: false, // 隐藏连线提示
|
|
|
+ format: '{point.name}'
|
|
|
+ },
|
|
|
+ showInLegend: true,
|
|
|
+ point: {
|
|
|
+ events: {
|
|
|
+ legendItemClick: function (e) {
|
|
|
+ e.preventDefault()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- _this.tjdevicex.push(res.data[i].Name)
|
|
|
- _this.tjdevicey.push(res.data[i].Num)
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ name: '占比',
|
|
|
+ // #6c757d #007fbb #c7000a
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ name: '评审准入 30 家',
|
|
|
+ color: '#60C0DD',
|
|
|
+ y: 30,
|
|
|
+ sliced: false, // 是否默认突出
|
|
|
+ selected: false
|
|
|
+ }, {
|
|
|
+ name: '招标准入 12 家 ',
|
|
|
+ color: '#E87C25',
|
|
|
+ y: 12,
|
|
|
+ sliced: false, // 是否默认突出
|
|
|
+ selected: false
|
|
|
+ }, {
|
|
|
+ name: '战略准入 42 家 ',
|
|
|
+ color: '#007fbb',
|
|
|
+ y: 42,
|
|
|
+ sliced: false, // 是否默认突出
|
|
|
+ selected: false
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }],
|
|
|
+ credits: {
|
|
|
+ enabled: false // 不显示LOGO
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ enabled: true,
|
|
|
+ layout: 'vertical',
|
|
|
+ align: 'right',
|
|
|
+ verticalAlign: 'bottom',
|
|
|
+ borderWidth: 0,
|
|
|
+ borderRadius: 0,
|
|
|
+ itemMarginTop: 10,
|
|
|
+ itemMarginBottom: 10,
|
|
|
+ itemStyle: {
|
|
|
+ fontWeight: 'bold',
|
|
|
+ fontSize: 18 // 图例项文字大小
|
|
|
+ },
|
|
|
+ squareSymbol: true, // 默认就是true
|
|
|
+ itemDistance: 150, // 图例项间距
|
|
|
+ symbolHeight: 12,
|
|
|
+ symbolWidth: 12,
|
|
|
+ symbolRadius: 1 // 将图例圆角设置为 值越大就变圆点 https://api.highcharts.com.cn/highcharts#legend.symbolRadius
|
|
|
}
|
|
|
- _this.drawBarChart()
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
- // handle error
|
|
|
- console.error(err)
|
|
|
})
|
|
|
- },
|
|
|
- // 统计样本总数的饼状图
|
|
|
- drawPieChart () {
|
|
|
- var chartPie = echarts.init(document.getElementById('deviceChartPie'))
|
|
|
- chartPie.setOption({
|
|
|
- title: {
|
|
|
- text: ''
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: 'item',
|
|
|
- formatter: '{b} {c} ({d}%)'
|
|
|
- },
|
|
|
- legend: {
|
|
|
- orient: 'vertical',
|
|
|
- left: 'right',
|
|
|
- itemHeight: 20,
|
|
|
- itemWidth: 20,
|
|
|
- data: this.tjzztitles
|
|
|
- },
|
|
|
- color: ['#D1EEEE', '#FFE1FF', '#FFA500', '#6A5ACD', '#D1EEEE', '#CAE1FF', '#C0FF3E', '#1E90FF', '#000080'],
|
|
|
- series: [{
|
|
|
- name: '样本类型',
|
|
|
- type: 'pie',
|
|
|
- radius: '92%',
|
|
|
- label: {
|
|
|
- normal: {
|
|
|
- show: false
|
|
|
+ this.supplierLevelOptions = Highcharts.chart('supplier-level', {
|
|
|
+ chart: {
|
|
|
+ type: 'pie',
|
|
|
+ marginLeft: 1, // 饼图距左距离
|
|
|
+ options3d: {
|
|
|
+ enabled: true,
|
|
|
+ alpha: 45,
|
|
|
+ beta: 0,
|
|
|
+ viewDistance: 25
|
|
|
}
|
|
|
},
|
|
|
- data: this.tjzzdata
|
|
|
- }]
|
|
|
- })
|
|
|
- },
|
|
|
- // 容器数据统计柱状图
|
|
|
- drawBarChart () {
|
|
|
- let _this = this
|
|
|
- var chartBar = echarts.init(document.getElementById('deviceChartBar'))
|
|
|
- chartBar.setOption({
|
|
|
- title: {
|
|
|
- text: ''
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: 'item',
|
|
|
- formatter: '({b}) {c}'
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- data: this.tjdevicex,
|
|
|
- axisLabel: {
|
|
|
- interval: 0,
|
|
|
- rotate: 40
|
|
|
+ title: false,
|
|
|
+ tooltip: {
|
|
|
+ pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
|
|
|
+ },
|
|
|
+ plotOptions: {
|
|
|
+ pie: {
|
|
|
+ size: '100%', // 饼图大小
|
|
|
+ allowPointSelect: false, // 设置饼图不可点击选择
|
|
|
+ cursor: 'pointer',
|
|
|
+ depth: 35, // 饼图的厚度
|
|
|
+ dataLabels: {
|
|
|
+ enabled: false, // 隐藏连线提示
|
|
|
+ format: '{point.name}'
|
|
|
+ },
|
|
|
+ showInLegend: true,
|
|
|
+ point: {
|
|
|
+ events: {
|
|
|
+ legendItemClick: function (e) {
|
|
|
+ e.preventDefault()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ name: '占比',
|
|
|
+ // #6c757d #007fbb #c7000a
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ name: '一级供应商 30 家 ',
|
|
|
+ color: '#60C0DD',
|
|
|
+ y: 30,
|
|
|
+ sliced: false, // 是否默认突出
|
|
|
+ selected: false
|
|
|
+ }, {
|
|
|
+ name: '二级制造商 12 家 ',
|
|
|
+ color: '#E87C25',
|
|
|
+ y: 12,
|
|
|
+ sliced: false, // 是否默认突出
|
|
|
+ selected: false
|
|
|
+ }, {
|
|
|
+ name: '二级贸易/代理商 42 家 ',
|
|
|
+ color: '#007fbb',
|
|
|
+ y: 42,
|
|
|
+ sliced: false, // 是否默认突出
|
|
|
+ selected: false
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }],
|
|
|
+ credits: {
|
|
|
+ enabled: false // 不显示LOGO
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ enabled: true,
|
|
|
+ layout: 'vertical',
|
|
|
+ align: 'right',
|
|
|
+ verticalAlign: 'bottom',
|
|
|
+ borderWidth: 0,
|
|
|
+ borderRadius: 0,
|
|
|
+ itemMarginTop: 10,
|
|
|
+ itemMarginBottom: 10,
|
|
|
+ itemStyle: {
|
|
|
+ fontWeight: 'bold',
|
|
|
+ fontSize: 18 // 图例项文字大小
|
|
|
+ },
|
|
|
+ squareSymbol: true, // 默认就是true
|
|
|
+ itemDistance: 150, // 图例项间距
|
|
|
+ symbolHeight: 12,
|
|
|
+ symbolWidth: 12,
|
|
|
+ symbolRadius: 1 // 将图例圆角设置为 值越大就变圆点 https://api.highcharts.com.cn/highcharts#legend.symbolRadius
|
|
|
}
|
|
|
- },
|
|
|
- yAxis: {},
|
|
|
- series: [{
|
|
|
- name: '容器类型',
|
|
|
- type: 'bar',
|
|
|
- label: {
|
|
|
- normal: {
|
|
|
- show: false
|
|
|
+ })
|
|
|
+ this.supplierScaleOption = Highcharts.chart('supplier-scale', {
|
|
|
+ chart: {
|
|
|
+ type: 'pie',
|
|
|
+ marginLeft: 1, // 饼图距左距离
|
|
|
+ options3d: {
|
|
|
+ enabled: true,
|
|
|
+ alpha: 45,
|
|
|
+ beta: 0,
|
|
|
+ viewDistance: 25
|
|
|
}
|
|
|
},
|
|
|
- data: this.tjdevicey,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: function (params) {
|
|
|
- var colorList = _this.tjdevicecolor
|
|
|
- return colorList[params.dataIndex]
|
|
|
+ title: false,
|
|
|
+ tooltip: {
|
|
|
+ pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
|
|
|
+ },
|
|
|
+ plotOptions: {
|
|
|
+ pie: {
|
|
|
+ size: '100%', // 饼图大小
|
|
|
+ allowPointSelect: false, // 设置饼图不可点击选择
|
|
|
+ cursor: 'pointer',
|
|
|
+ depth: 35, // 饼图的厚度
|
|
|
+ dataLabels: {
|
|
|
+ enabled: false, // 隐藏连线提示
|
|
|
+ format: '{point.name}'
|
|
|
+ },
|
|
|
+ showInLegend: true,
|
|
|
+ point: {
|
|
|
+ events: {
|
|
|
+ legendItemClick: function (e) {
|
|
|
+ e.preventDefault()
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ name: '占比',
|
|
|
+ // #6c757d #007fbb #c7000a
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ name: '注册资金500万以下 30 家',
|
|
|
+ color: '#FE8463',
|
|
|
+ y: 30,
|
|
|
+ sliced: false, // 是否默认突出
|
|
|
+ selected: false
|
|
|
+ }, {
|
|
|
+ name: '注册资金500万-1000万 12 家',
|
|
|
+ color: '#60C0DD',
|
|
|
+ y: 12,
|
|
|
+ sliced: false, // 是否默认突出
|
|
|
+ selected: false
|
|
|
+ }, {
|
|
|
+ name: '注册资金1000万-2000万 42 家',
|
|
|
+ color: '#E87C25',
|
|
|
+ y: 42,
|
|
|
+ sliced: false, // 是否默认突出
|
|
|
+ selected: false
|
|
|
+ }, {
|
|
|
+ name: '注册资金2000万-5000万 42 家',
|
|
|
+ color: '#007fbb',
|
|
|
+ y: 42,
|
|
|
+ sliced: false, // 是否默认突出
|
|
|
+ selected: false
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }],
|
|
|
+ credits: {
|
|
|
+ enabled: false // 不显示LOGO
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ enabled: true,
|
|
|
+ layout: 'vertical',
|
|
|
+ align: 'right',
|
|
|
+ verticalAlign: 'bottom',
|
|
|
+ borderWidth: 0,
|
|
|
+ borderRadius: 0,
|
|
|
+ itemMarginTop: 10,
|
|
|
+ itemMarginBottom: 10,
|
|
|
+ itemStyle: {
|
|
|
+ fontWeight: 'bold',
|
|
|
+ fontSize: 18 // 图例项文字大小
|
|
|
+ },
|
|
|
+ squareSymbol: true, // 默认就是true
|
|
|
+ itemDistance: 10, // 图例项间距
|
|
|
+ symbolHeight: 12,
|
|
|
+ symbolWidth: 12,
|
|
|
+ symbolRadius: 1 // 将图例圆角设置为 值越大就变圆点 https://api.highcharts.com.cn/highcharts#legend.symbolRadius
|
|
|
}
|
|
|
- }]
|
|
|
- })
|
|
|
- },
|
|
|
- // 折线图
|
|
|
- drawContractline (val, xdata, ydata) {
|
|
|
- let _this = this
|
|
|
- var chartBar = echarts.init(document.getElementById(val))
|
|
|
- chartBar.setOption({
|
|
|
- title: {
|
|
|
- text: ''
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis'
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- boundaryGap: false,
|
|
|
- data: xdata
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value'
|
|
|
- },
|
|
|
- series: [{
|
|
|
- data: ydata,
|
|
|
- type: 'line'
|
|
|
- }]
|
|
|
+ })
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
@@ -438,33 +442,60 @@
|
|
|
flex-direction: column;
|
|
|
.todo-box {
|
|
|
display: flex;
|
|
|
- height: 20%;
|
|
|
- padding-top: 0px;
|
|
|
+ height: 25%;
|
|
|
+ padding-top: 0;
|
|
|
margin-bottom: 1%;
|
|
|
.todo-box-item {
|
|
|
width: 20%;
|
|
|
margin: 0 5px;
|
|
|
- border: 1px solid #F6931F
|
|
|
+ background-color: white;
|
|
|
}
|
|
|
}
|
|
|
.chart-box {
|
|
|
width: 100%;
|
|
|
- height: 80%;
|
|
|
- padding-top: 0px;
|
|
|
+ height: 75%;
|
|
|
+ padding-top: 0;
|
|
|
margin-bottom: 1%;
|
|
|
.chart-box-row {
|
|
|
display: flex;
|
|
|
width: 100%;
|
|
|
height: 50%;
|
|
|
- padding-top: 0px;
|
|
|
+ padding-top: 0;
|
|
|
margin-bottom: 1%;
|
|
|
.chart-box-row-item {
|
|
|
+ position: relative;
|
|
|
width: 50%;
|
|
|
height: 100%;
|
|
|
- margin: 0 5px;
|
|
|
- padding-top: 0px;
|
|
|
- border: 1px solid #00ffff;
|
|
|
- margin-bottom: 1%
|
|
|
+ padding-top: 0;
|
|
|
+ margin: 0 7px 1%;
|
|
|
+ background-color: white;
|
|
|
+ .item-more-button {
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ right: 20px;
|
|
|
+ /*display:table-cell;*/
|
|
|
+ vertical-align:middle;
|
|
|
+ /*height: 15%;*/
|
|
|
+ /*padding-top: 20px;*/
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: right;
|
|
|
+ color: #2F79F6;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ padding-right: 20px;
|
|
|
+ }
|
|
|
+ .item-chart-body {
|
|
|
+ height: 100%;
|
|
|
+ text-align: left;
|
|
|
+ position: relative;
|
|
|
+ .item-high-chart {
|
|
|
+ position: absolute;
|
|
|
+ left: 40px;
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 80%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
baichengfei