之前在js直接引用echarts可以正常使用, 下面的图是我之前做的
但是用了vue之后, 布局全乱了, 调也调不了
html
js
export default {
mounted() {
/* 统计柱状图 */
var myChart = echarts.init(document.getElementById("main"));
// 指定图表的配置项和数据
var statistics = {
title: {
text: "面积",
textStyle: {
fontWeight: "normal",
color: "#fff", // 标题颜色
fontSize: 14
},
left: "center"
},
tooltip: {
// 鼠标移动柱状图是提示文字
show: true
},
legend: {
// data: ['面积'],
textStyle: {
fontSize: 12
}
},
// 横坐标
xAxis: {
data: ["灌木", "森林", "森林", "树木", "小树", "大树", "红树"],
axisLabel: {
show: true,
textStyle: {
color: "#fff"
}
},
axisLine: {
lineStyle: {
color: "#094060"
}
}
},
// 纵坐标
yAxis: {
// 设置坐标轴字体颜色
axisLine: {
lineStyle: {
color: "#094060"
}
},
axisLabel: {
show: true,
textStyle: {
color: "#fff"
}
},
splitLine: {
lineStyle: {
color: ["#07405c"]
}
}
},
//配置样式
itemStyle: {
color: '#06ae7c',
//鼠标悬停时：
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
},
series: [
{
type: "bar",
barWidth: 50, // 设置柱的宽度
data: [38, 23, 35, 12, 26, 8, 36]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(statistics);
}
}

使用Vue做后台管理系统的时候避免不了使用Echarts来展示对应的数据，下面是使用Echarts柱状图来展示对应数据的实例。
ee05abaf9633184a9c012631b642d970.png
使用npm安装Echarts
npm install echarts --save
在man.js中引入对应的echarts
import ECharts from 'vue-echarts'  // 在 webpack 环境下指向 components/ECharts.vue
/* 引入echarts工具 */
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
在vue文件下的编写
data() {
return {
optionTrend: {
color: ['#2860fc'],
tooltip: {
trigger: 'axis',
axisPointer: {   // 坐标轴指示器，坐标轴触发有效
type: 'shadow'    // 默认为直线，可选为：'line' | 'shadow'|'none'
}
},
title: {
text: '金额数量',
top: '15',
left: '-3',
textStyle:{
fontSize: 14,   //字体大小
color: '#666666',   //字体颜色
fontWeight: '500'
},
},
grid: {
left: '-27',
right: '4',
bottom: '0%',
containLabel: true
},
xAxis: [ {
type: 'category',
data: ['0-5K', '5K-3W', '3W-5W', '5W-10W', '10W以上',],
axisLine: {   // 改变x轴颜色
lineStyle: {
color: '#c1c1c1',
width: '1',
}
},
axisLabel: {    // 改变x轴字体颜色和大小
textStyle: {
color: "#666666",
fontSize: 12,
},
},
} ],
yAxis: [ {
type: 'value',
axisTick: 'none',    // 右边轴样式的显示
axisLine: 'none',    // 右边轴样式的显示
// 修改网格的颜色
splitLine: {
show: true,
lineStyle: {
type: 'solid',
color: '#f5f5f5'
}
},
} ],
series: [ {
name: '',
type: 'bar',
barWidth: '50%',
data: [10, 52, 200, 334, 390,]
} ]
},
}
},
beforeDestroy() {
window.removeEventListener("resize", this.resizeTheChart);
},
mounted(){
window.addEventListener("resize", this.resizeTheChart);
},
methods:{
resizeTheChart() {
if (this.$refs.TrendChart) {
this.$refs.TrendChart.resize();
}
},
27c1eac97e42e440849ac938a0bc4574.png
应为上面已经贴过template、beforeDestroy、mounted和methods里面的代码了这里只贴对应options里面的代码
dataRecordOptions: {
grid: {
left: '40',
right: '20',
bottom: '30',
top: '30',
},
tooltip : {
trigger: 'axis',
axisPointer: {
type: 'none',   // 中间横线
},
},
xAxis: {
data: ['数字身份','存证','数据报送','电子合同',],
axisLine: 'none',
axisLabel: {
color: '#fff',
fontSize: 12,
fontWeight: 500,
}
},
yAxis: {
type : 'value',
axisLabel: {
textStyle: {
fontSize: 12,   //字体大小
color: '#137cf2',   //字体颜色
},
formatter: function (value, index) {
if (value >= 10000 && value < 10000000) {
value = value / 10000 + "万";
} else if (value >= 10000000 && value < 100000000) {
value = value / 10000000 + "千万";
} else if (value >= 100000000) {
value = value / 100000000 + "亿";
}
return value;
}
},
splitLine: {
show:true,
lineStyle: {
color: '#737f8d',
type: 'dashed',   // 背景为虚线
}
},
axisTick: 'none',  // 右边轴样式的显示
axisLine: 'none',  // 右边轴样式的显示
},
series: [{
type: 'bar',
barWidth: 30,
smooth:false,
itemStyle:{
normal: {
color: function(params) {
var colorList = ['#137cf2','#f89009','#f8d909','#01cc78',];
var colorListr = ['#137cf2','#f8d909','#f89009','#5e00a6',];
return colorListr[params.dataIndex]
},
},
},
label: {
normal: {
show: true,
fontSize: 12,
fontWeight: '500',
color: '#ffffff',
position: 'top',
}
},
data: [10000,12000,8000,14000],
}],
}

	

一. 下载echarts
npm install echarts --save
二.在main.js里引入echarts
import echarts from 'echarts'Vue.prototype.$echarts = echarts
三.在vue组件中的使用
<template>  <div>   <div>乡镇环保指数概况div>    <div id="myChart" :style="{width: '400px', height: '400px'}">div>  div>template><script type="text/ecmascript-6">export default { methods:{  drawLine(){   // 基于准备好的dom，初始化echarts实例    let myChart = this.$echarts.init(document.getElementById('myChart'))    let that = this     // 绘制图表     myChart.setOption({       color: ['#3B93F7', '#7BD7B5'],       legend: {data: ['平邑开发区', '平邑检测站']},        xAxis: [{            data: ['PM2.5', 'PM10', 'SO2', 'NO2', 'O3']               }],         yAxis: [{               min:0,               max:100                }],         series: [{            name: '平邑开发区',            type: 'bar',            barGap: 0,            data: [20, 32, 1, 34, 60],            itemStyle: {                 normal: {                   color: function(params) {                      let colorList = [  // 存放柱状图渐变色的数组可以是多个                             ['#1f6cf6', '#409af7'],                           ];                    let index = params.dataIndex % colorList.length;                          // 如果是纵向渐变色的图标，则改为0, 0 , 0, 1                          //如果是横向的渐变色图标，则改为1, 0 , 0, 0                     return new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [                            { offset: 0, color: colorList[index][0] },                            { offset: 1, color: colorList[index][1] }                          ]);                          },                        barBorderRadius: 2 //柱状角成椭圆形                         }                        }                    },                      {                        name: '平邑检测站',                          type: 'bar',                          data: [20, 82, 91, 44, 90],                          itemStyle: {                                normal: {                                  color: function(params) {                                    var colorList = [                                      ['#50b398', '#89e3be'],                                    ];                                      var index = params.dataIndex % colorList.length;                                    // 如果是纵向的图标，则改为0, 0 , 0, 1                                    return new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [                                      { offset: 0, color: colorList[index][0] },                                      { offset: 1, color: colorList[index][1] }                                    ]);                                  },                                  barBorderRadius: 2 //柱状角成椭圆形                                }                          }                      },                  ]            });        }    },    mounted(){       this.drawLine();    }  }script><style scoped>style>
四.实现的效果展示

效果

echarts 柱状图vue封装
<template>
	<div class="bar" id="bar" />
</template>

<script>
// 自行引入echarts
import echarts from 'echarts'

export default {
  name: 'Bar',
  // 接收从父组件传回的值
  props: ['getData'],
  data () {
    return {}
  },
  // 实时监听父组件传过来的值，进而执行drawBar方法，重绘柱状图
  watch: {
    getData: {
      handler (value) {
        this.drawBar(value)
      },
      deep: true
    }
  },
  mounted () {
    this.drawBar()
  },
  methods: {
    drawBar ({
      textTitle = '',
      nameTitle = '',
      xName = '',
      yName = '',
      nameArray = [],
      dataArray = [],
      colorArray = [],
      barWidth = '30%',
      showTopVal = false,
      xAxis = [
        {
          name: yName,
          type: 'category',
          data: nameArray,
          nameLocation: 'end',
          axisTick: {
            show: false
          },
          splitLine: {
            show: false // 去除网格线
          },
          axisLabel: {
            interval: 1,
            formatter: function (value) {
              let str = ''
              let num = 7 // 每行显示字数
              let valLength = value.length // 该项x轴字数
              let rowNum = Math.ceil(valLength / num) // 行数

              if (rowNum > 1) {
                for (let i = 0; i < rowNum; i++) {
                  let temp = ''
                  let start = i * num
                  let end = start + num

                  temp = value.substring(start, end) + '\n'
                  str += temp
                }
                return str
              } else {
                return value
              }
            }
          },
          nameTextStyle: {
            padding: [30, 0, 0, -30]
          }
        }
      ],
      dataZoom = [],
      grid = {
        left: 20,
        right: 20,
        bottom: 20,
        top: 80,
        containLabel: true
      }
    } = {}) {
      let barBox = echarts.init(document.getElementById('bar'))
      let option = {
        title: {
          text: textTitle,
          left: 'center',
          top: 10,
          textStyle: {
            color: '#333',
            fontSize: '18',
            fontWeight: 'bolder'
          }
        },
        grid: grid,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        dataZoom: dataZoom,
        xAxis: xAxis,
        yAxis: [
          {
            axisLine: { show: false },
            name: xName,
            type: 'value'
            // axisLabel: {
            //   formatter: value => (value + '元')
            // }
          }
        ],
        series: [
          {
            name: nameTitle,
            type: 'bar',
            barWidth: barWidth,
            data: dataArray,
            label: {
              show: showTopVal, // 开启显示
              position: 'top', // 在上方显示
              textStyle: { // 数值样式
                color: '#333333',
                fontSize: 12
              }
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  const colorList = colorArray
                  return colorArray.length > 0 ? colorList[params.dataIndex] : '#EA8187'
                }
              }
            }
          }
        ]
      }
      barBox.setOption(option, true)
    }
  }
}
</script>


使用
<template>
      <div>
       <--宽度，高度-->
        <bar :get-data="objectData" id="barId" style="height: 250px"></bar >
      </div>
</template>
<script>
import Bar from '@/components/bar'

export default {
  components: {
    Bar
  },
   data ()  {
	   return {
	       objectData: {
			       	textTitle: '',
			        nameTitle: '',
			        nameArray: [],
			        dataArray: [],
			        colorArray: []
     		 }
	  	 }
     }
</script>