|
|
@@ -4,7 +4,7 @@
|
|
|
<el-col :span="24" class="main">
|
|
|
<el-col :span="24" class="title"> e专利 </el-col>
|
|
|
<el-col :span="24" class="canvas">
|
|
|
- <div id="twoChart" style="height: 420px"></div>
|
|
|
+ <div id="twoChart" style="height: 425px"></div>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -29,30 +29,79 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
...statistics(['query']),
|
|
|
- init() {
|
|
|
- var chartDom = document.getElementById('twoChart');
|
|
|
- var myChart = echarts.init(chartDom);
|
|
|
- var option;
|
|
|
- option = {
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- data: [120, 200, 150, 80, 70, 110, 130],
|
|
|
- type: 'bar',
|
|
|
- showBackground: true,
|
|
|
- backgroundStyle: {
|
|
|
- color: 'rgba(180, 180, 180, 0.2)',
|
|
|
+ async init() {
|
|
|
+ let res = await this.query({ type: 'patent' });
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ let viewData = res.data.map((i) => i.name);
|
|
|
+ var chartDom = document.getElementById('twoChart');
|
|
|
+ var myChart = echarts.init(chartDom);
|
|
|
+ const option = {
|
|
|
+ title: {},
|
|
|
+ tooltip: { trigger: 'axis' },
|
|
|
+ grid: {
|
|
|
+ y2: 140,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: [0, 0.01],
|
|
|
+ name: '申请人',
|
|
|
+ data: viewData,
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0, //横轴信息全部显示
|
|
|
+ rotate: -30, //-30度角倾斜显示
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ // 坐标轴 刻度
|
|
|
+ show: true, // 是否显示
|
|
|
+ inside: true, // 是否朝内
|
|
|
+ length: 3, // 长度
|
|
|
+ lineStyle: {
|
|
|
+ // 默认取轴线的样式
|
|
|
+ color: 'red',
|
|
|
+ width: 1,
|
|
|
+ type: 'solid',
|
|
|
+ },
|
|
|
},
|
|
|
},
|
|
|
- ],
|
|
|
- };
|
|
|
- option && myChart.setOption(option);
|
|
|
+ yAxis: {},
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: 'e专利',
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'top',
|
|
|
+ },
|
|
|
+ type: 'bar',
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: function (params) {
|
|
|
+ var colorList = [
|
|
|
+ '#C1232B',
|
|
|
+ '#B5C334',
|
|
|
+ '#FCCE10',
|
|
|
+ '#E87C25',
|
|
|
+ '#27727B',
|
|
|
+ '#FE8463',
|
|
|
+ '#9BCA63',
|
|
|
+ '#FAD860',
|
|
|
+ '#F3A43B',
|
|
|
+ '#60C0DD',
|
|
|
+ '#778899',
|
|
|
+ '#00FFFF',
|
|
|
+ '#FFEFD5',
|
|
|
+ '#F08080',
|
|
|
+ '#DCDCDC',
|
|
|
+ ];
|
|
|
+ return colorList[params.dataIndex];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: res.data,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ option && myChart.setOption(option);
|
|
|
+ }
|
|
|
},
|
|
|
},
|
|
|
computed: {
|
