vue-echarts全局组件使用

在入口main.js 注册全局组件

引入

import 'echarts'

注册全局组件

Vue.component(id:'chart', ECharts)

在全局组件使用的时候

DIV部分

  ref="taskChart"

  :theme="charts.theme"

  autoresize :options="charts.optionsu"

  @click="zydwclick"

  :style="{width:charts.width,height:charts.height}">

data部份

charts: {

//树形图

optionsu: {

color: ['#3398DB'],

  // backgroundColor: 'rgba(0, 0, 0, 0)',

  tooltip: {

trigger:'axis',

    axisPointer: {// 坐标轴指示器，坐标轴触发有效

      type:'shadow'        // 默认为直线，可选为：'line' | 'shadow'

    }

},

  grid: {

left:'2%',

    right:'4%',

    bottom:'14%',

    top:'16%',

    containLabel:true

  },

  legend: {

data: [],

    right:10,

    top:12,

    textStyle: {

color:"#16dbf9"

    },

    itemWidth:12,

    itemHeight:30

  },

  calculable:true,

  xAxis: [

{

type:'category',

      data: [],

      lineStyle: {

show:false,

        color:'white'

      },

      splitLine: {

show:false    //去掉网格线

      },

//让字体倾斜45度角

      axisLabel: {

interval:0,

        rotate:45,//倾斜度 -90 至 90 默认为0

        textStyle: {

fontWeight:"normal",

          color:"#006a89"

        }

},

    }

],

  yAxis: [

{

type:'value',

      splitLine: {

show:false    //去掉网格线

      }

}

],

  series: [{

type:'bar',

    barWidth:'30%',

    data: [10, 52, 200, 334, 390, 330, 220],

    // 渐变

    itemStyle: {

normal: {

color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

offset:0,

          color:"#03fbfe" // 0% 处的颜色

        }, {

offset:0.6,

          color:"#36a3f1" // 60% 处的颜色

        }, {

offset:1,

          color:"#2b91f1" // 100% 处的颜色

        }], false),

        barBorderRadius:50,

//开启现实上面的文字

        label: {

show:true, //开启显示

          position:'top', //在上方显示

          textStyle: {//数值样式

            color:'#fff',

            fontSize:16,

          }

}

}

}

}

]

},