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>

	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;
      },	
   }