1透绩、使用Vue.directive 自定義指令兆龙。
Vue.directive('echarshis',function (data) {
? ? ? ? ? var myChart = echarts.init(document.getElementById(data.ele));
? ? ? ? ? var app = {};
? ? ? ? ? option = null;
? ? ? ? ? option = {
? ? ? ? ? ? ? title: {
? ? ? ? ? ? ? ? ? text: '',
? ? ? ? ? ? ? ? ? subtext: ''
? ? ? ? ? ? ? },
? ? ? ? ? ? ? tooltip: {
? ? ? ? ? ? ? ? ? trigger: 'axis',
? ? ? ? ? ? ? ? ? "axisPointer": {
? ? ? ? ? ? ? ? ? ? ? "type": "shadow"
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? },
? ? ? ? ? ? ? legend: {
? ? ? ? ? ? ? ? ? orient: 'vertical',
? ? ? ? ? ? ? ? ? top:'top',
? ? ? ? ? ? ? ? ? data: []
? ? ? ? ? ? ? },
? ? ? ? ? ? ? grid: {
? ? ? ? ? ? ? ? ? "borderWidth": 10,
? ? ? ? ? ? ? ? ? "y2": 120,
? ? ? ? ? ? ? ? ? "containLabel":true
? ? ? ? ? ? ? },
? ? ? ? ? ? ? toolbox: {
? ? ? ? ? ? ? ? ? show: true,
? ? ? ? ? ? ? ? ? feature: {
? ? ? ? ? ? ? ? ? ? ? dataZoom: {
? ? ? ? ? ? ? ? ? ? ? ? ? yAxisIndex: 'none'
? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? dataView: {readOnly: false},
? ? ? ? ? ? ? ? ? ? ? magicType: {type: ['bar','line']},
? ? ? ? ? ? ? ? ? ? ? restore: {},
? ? ? ? ? ? ? ? ? ? ? saveAsImage: {}
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? },
? ? ? ? ? ? ? xAxis: ?[
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? "type": "category",
? ? ? ? ? ? ? ? ? ? ? "splitLine": {
? ? ? ? ? ? ? ? ? ? ? ? ? "show": false
? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? "axisTick": {
? ? ? ? ? ? ? ? ? ? ? ? ? "show": false
? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? "splitArea": {
? ? ? ? ? ? ? ? ? ? ? ? ? "show": false
? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? "axisLabel": {
? ? ? ? ? ? ? ? ? ? ? ? ? "interval": 0,
? ? ? ? ? ? ? ? ? ? ? ? ? "rotate": 45,
? ? ? ? ? ? ? ? ? ? ? ? ? "show": true,
? ? ? ? ? ? ? ? ? ? ? ? ? "splitNumber": data.lens,
? ? ? ? ? ? ? ? ? ? ? ? ? "textStyle": {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "fontFamily": "微軟雅黑",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "fontSize": 10
? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? "data": data.prj
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ],
? ? ? ? ? ? ? yAxis: {
? ? ? ? ? ? ? ? ? "type": "value",
? ? ? ? ? ? ? ? ? "splitLine": {
? ? ? ? ? ? ? ? ? ? ? "show": false
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? "axisLine": {
? ? ? ? ? ? ? ? ? ? ? lineStyle: {
? ? ? ? ? ? ? ? ? ? ? ? ? color: '#90979c'
? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? "axisTick": {
? ? ? ? ? ? ? ? ? ? ? "show": false
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? "axisLabel": {
? ? ? ? ? ? ? ? ? ? ? "interval": 0,
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? "splitArea": {
? ? ? ? ? ? ? ? ? ? ? "show": false
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? },
? ? ? ? ? ? ? dataZoom: [
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? "show": true,
? ? ? ? ? ? ? ? ? ? ? "height": 30,
? ? ? ? ? ? ? ? ? ? ? "xAxisIndex": [
? ? ? ? ? ? ? ? ? ? ? ? ? 0
? ? ? ? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? ? ? ? bottom:40,
? ? ? ? ? ? ? ? ? ? ? "start": 0,
? ? ? ? ? ? ? ? ? ? ? "end": 80
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? "type": "inside",
? ? ? ? ? ? ? ? ? ? ? "show": true,
? ? ? ? ? ? ? ? ? ? ? "height": 15,
? ? ? ? ? ? ? ? ? ? ? "xAxisIndex": [
? ? ? ? ? ? ? ? ? ? ? ? ? 0
? ? ? ? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? ? ? ? "start": 1,
? ? ? ? ? ? ? ? ? ? ? "end": 35
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ],
? ? ? ? ? ? ? series: [
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? name:'嚴(yán)重Bug',
? ? ? ? ? ? ? ? ? ? ? type:'bar',
? ? ? ? ? ? ? ? ? ? ? data: data.seBug,
? ? ? ? ? ? ? ? ? ? ? markPoint: {
? ? ? ? ? ? ? ? ? ? ? ? ? data: [
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {type: 'max', name: '最大值'}
? ? ? ? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? markLine: {
? ? ? ? ? ? ? ? ? ? ? ? ? data: [
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {type: 'average', name: '平均值'}
? ? ? ? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ]
? ? ? ? ? };
? ? ? ? ? ;
? ? ? ? ? if (option && typeof option === "object") {
? ? ? ? ? ? ? myChart.setOption(option, true);
? ? ? ? ? }
? ? ? ? ? window.onresize = myChart.resize;
? ? ? });
data 為json類型。
2耻台、聲明一個(gè)容器
<div id="prjcharhis" style="width:650px;height:480px;"?v-echarshis="{ele:'prjcharhis',text:'',prj:prjList,seBug:seBugList,lens:len}" ></div>
3空免、創(chuàng)建一個(gè)Vue實(shí)例
var vmhischar = new Vue({
? ? ? ? ? el: '#prjcharhis',
? ? ? ? ? data:{
? ? ? ? ? ? ? prjList:[],
? ? ? ? ? ? ? seBugList:[],
? ? ? ? ? ? ? len:'',
? ? ? ? ? ? ? apiUrl: '/main/index/*****'?
? ? ? ? ? },
? ? ? ? ? ready: function(){
? ? ? ? ? ? ? this.getHisInfoData();
? ? ? ? ? },
? ? ? ? ? methods: {
? ? ? ? ? ? ? initHisInfoData:function() {
? ? ? ? ? ? ? },
? ? ? ? ? ? ? getHisInfoData: function(){
? ? ? ? ? ? ? ? ? this.$http.get(this.apiUrl).then(function(response){
? ? ? ? ? ? ? ? ? ? ? this.$set('prjList', response.data.prjList);
? ? ? ? ? ? ? ? ? ? ? this.$set('seBugList', response.data.seBugList);
? ? ? ? ? ? ? ? ? ? ? this.$set('len',response.data.prjList.length);
? ? ? ? ? ? ? ? ? }).catch(function(response){
? ? ? ? ? ? ? ? ? ? ? console.log(response);
? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? }
? ? ? ? ? }
? ? ? });
備注：vmhischar.$el=id=data.ele
