<v-chart :forceFit="true" :height="height" :scale="scale">
<v-tooltip />
<v-legend />
<!-- 柱形图 -->
<v-view :data="dataT">
<v-axis data-key='value' :title="title" />
<v-stack-bar position="year*value" :vStyle="stackBarStyle" color="type" />
</v-view>
<!-- 折线图 -->
<v-view :data="data1">
<v-smooth-line position="year*value" shape="smooth" :color="['city', ['#69dfae']]" />
</v-view>
</v-chart>
data(){
height: 420,
title:{
offset: 50
},
scale: [{
dataKey: 'value',
alias: '单位 (件)'
}],
stackBarStyle: {
stroke: "#fff",
lineWidth: 1,
},
dataSourceT: [{
type: "发明",
value: 143,
year: "2010年"
},{
type: "实用新型",
value: 171,
year: "2010年"
},{
type: "外观设计",
value: 84,
year: "2010年",
},{
type: "发明",
value: 129,
year: "2011年"
}], //三种专利趋势数据
brokenLineList:[{
value: 399,
year: "2010年",
},{
value: 499,
year: "2011年",
}],
}
computed: {
// 图一(申请 公开 授权趋势)********************************************
dataT() {
const dvT = new DataSet.View().source(this.dataSourceT)
dvT.transform({
type: 'percent',
field: 'value',
dimension: 'type',
groupBy: ['year'],
as: 'percent',
})
let rows = dvT.rows
return rows
},
data1(){ //折线图
const dv = new DataSet.View().source(this.brokenLineList);
dv.transform({
type: 'fold',
fields: ['总量'],
key: 'city',
value: 'temperature',
});
const data1 = dv.rows;
return data1;
},
}
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)