游戏设计 网站,虹口 教育 网站建设,苏州h5网站,做外贸网站方案使用Vue做后台管理系统的时候避免不了使用Echarts来展示对应的数据#xff0c;下面是使用Echarts柱状图来展示对应数据的实例。ee05abaf9633184a9c012631b642d970.png使用npm安装Echartsnpm install echarts --save在man.js中引入对应的echartsimport ECharts from vue-echart…使用Vue做后台管理系统的时候避免不了使用Echarts来展示对应的数据下面是使用Echarts柱状图来展示对应数据的实例。ee05abaf9633184a9c012631b642d970.png使用npm安装Echartsnpm install echarts --save在man.js中引入对应的echartsimport ECharts from vue-echarts // 在 webpack 环境下指向 components/ECharts.vue/* 引入echarts工具 */import echarts/lib/component/tooltipimport echarts/lib/component/titleimport 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],}],}
