vue与viser 实现chart混合图

一、效果图

二、代码块

	<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>
	export default{
		const DataSet = require('@antv/data-set');
		data(){
			return{
				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;
	      },	
	   }
	}