echarts柱状图横向排行榜实战开发

先来一张效果图：

<template><div class="wrapper"><h1>市场公益考评综合排名<span>Physical Yield Analysis</span></h1><div class="paihangbang3_box"><div id="paihangbang3" :style="{width: '100%', height: '150px'}"></div></div></div>
</template><script>
export default {components: {},props: {},data() {return {};},created() {},mounted() {this.drawLine();},methods: {drawLine() {var weatherIcons = {first: "../../../static/img/first.png",second: "../../../static/img/second.png",third: ".../../../static/img/third.png"};var paihangOption = {title: {},tooltip: {trigger: "axis"},legend: {data: []},grid: {x: 95, //左留白y: 10, //上留白x2: 35, //右留白y2: 30 //下留白},calculable: true,dataset: {dimensions: ["goods_name", "trade_num"],source: [{ goods_name: "香菇", trade_num: 8 },{ goods_name: "鳜鱼", trade_num: 8 },{ goods_name: "冬瓜", trade_num: 7 },{ goods_name: "鲜鹌鹑蛋", trade_num: 6 },{ goods_name: "萝卜", trade_num: 6 },{ goods_name: "枣", trade_num: 6 }]},xAxis: [{splitLine: {show: false},type: "value",axisLine: {show: false,lineStyle: {color: "rgba(255, 255, 255, 0.3)",width: 1}},axisTick: {show: false},axisLabel: {show: true,margin: 100,textStyle: {align: "left",color: "#00FFFF", //更改坐标轴文字颜色fontSize: 10 //更改坐标轴文字大小}}}],yAxis: [{type: "category",// data: ["泽兰", "人参", "枸杞", "3.紫苏", "2.香叶", "1.车前草"],//boundaryGap: ["1%", "1%"],  类目起始和结束两端空白策略inverse: true,axisLine: {lineStyle: {color: "rgba(255, 255, 255, 0.2)",width: 1}},axisLabel: {show: true,textStyle: {color: function(value, index) {return index <= 2 ? "#FDAD00" : "#fff";},//更改坐标轴文字颜色fontSize: 12 //更改坐标轴文字大小},formatter: function(value, index) {if (index == 0) {return "{first|}" + "  1 " + value;} else if (index == 1) {return "{second|}" + "  2 " + value;} else if (index == 2) {return "{third|}" + "  3 " + value;} else {return "      " + (index + 1) + " " + value;}},rich: {value: {color: "#fff",fontSize: 12},first: {color: "FDAD00",backgroundColor: {image: weatherIcons.first}},second: {color: "FDAD00",backgroundColor: {image: weatherIcons.second}},third: {color: "FDAD00",backgroundColor: {image: weatherIcons.third}}}}}],series: [{// name:'2011年',type: "bar",// data: [200, 210, 220, 230, 240, 250],itemStyle: {normal: {//每根柱子颜色设置color: function(params) {var _this = this;let colorList = [["#E56E6E", "#EFA4A4"],["#FEB763", "#F9CF9E"],["#00C0DD", "#00C0DD"],["#23C83E", "#9BF194"],["#1AA291", "#1AA291"],["#4186EC", "#3AB3FB"]];var index = params.dataIndex;return {colorStops: [{offset: 0.8, //颜色的开始位置color: colorList[index][0] // 0% 处的颜色},{offset: 0, //颜色的结束位置color: colorList[index][1] // 100% 处的颜色}]};}}}, //柱状图上显示数据label: {show: "true",position: [220, "20%"],color: "#FFF",fontSize: "12"}}]};let myChart = this.$echarts.init(document.getElementById("paihangbang3"));myChart.setOption(paihangOption);//   this.$axios({//     method: "get",//     url: "/api/detection/detection_info/detectRank?mcode="+this.market_id+'&order_type=1',//     // data: param//     })//     .then(res => {//         if (res.data.status == 1) {//         var data = res.data.data//         if (data.length>0) {//         data.forEach((item,index) => {//         this.paihangOption.yAxis[0].data.push(item.name)//         var obj = {}//         obj.value = item.percent//         obj.itemStyle = {//         normal:{//         color:this.paihangOption.color[index]//         }//         }//         this.paihangOption.series[0].data.push(obj)//         })//         this.showTotal()//         }//         }//     }).catch(error => {//     })}}
};
</script>
<style scoped>
.wrapper {height: 195px;border: 1px solid red;
}
.wrapper .paihangbang3_box {background: url("../../../static/img/transdata_bg.png") no-repeat center/100%100%;padding-top: 20px;transform: translateY(-12px);
}
</style>

echarts柱状图横向排行榜实战开发相关推荐

Echarts 柱状图横向展示和竖向展示
第021个点击查看专栏目录本示例是显示柱状图,分别是横向展示和纵向展示.关键是X轴和Y轴的参数互换. 文章目录横向示例效果横向示例源代码(共81行) 纵向示例效果纵向示例源代码(共81行) ...
echarts柱状图横向名字过长时显示省略号
实现效果: var data = ["19.60", "18.90", "13.00", "9.90", "6 ...
echarts（横向柱状图和grid）
场景最近在做知识图谱的时候,右侧弹窗需要有数据统计功能,大概UI如下图,当时想到的是横向柱状图来实现,目前的效果与UI的不同是后面统计的数量显示的位置.后来经其他前端同事启发,他是用进度条来实现的, ...
echarts实现柱状图不同颜色柱状图横向纵向展示
柱状图不同颜色实现 series: [{name: '',type: 'bar', // color:'#50cfe4',//data: [987342,524214,504344,325424,24 ...
echarts柱状图改变标签的位置及柱状图颜色
echarts柱状图改变标签的位置(柱状图里面的数值位置)及柱状图颜色在 series里面改变label对象里面的label属性 import * as echarts from 'echarts' ...
echarts 柱状图渐变色背景
如何制作柱状图渐变色背景,我们可以先参考 echarts 柱状图颜色设置.接下来我们来实战一下,看看这次的效果图吧. 首先我们可以看到,X 轴表示数据,Y轴表示类别.柱状图上有该地区的数量,同时柱状图 ...
精品课程申报系统实战开发代码全纪录
实战开发记录项目沟通项目说明项目分解项目开发 Day1 用户登录 Day2 后台管理菜单能否单击 Day3~4 项目信息录入 Day5 短信通知短信发送上报通知不同权限管理员区域的选择 ...
【Echart多场景示例应用】Echarts柱状图、折线图、饼图、雷达图等完整示例。 echarts主标题和副标题的位置、样式等设置（已解决附源码）
**[写在前面]**前端时间做一个echarts的页面调整,临时客户要求加一个参数(总容量)显示,当时我就想用个默认的副标题吧,哪知客户和我说得紧跟在主标题后面,于是乎我就根据设置做了一个调整,我也是 ...
这个月干啥去了？——H5+移动应用实战开发
又到了公司一年当中最忙的时刻了,为了赶项目,现在居然开启了996模式,这是我从事.net开发以来从来没遇到过的. 一转眼,一个月又过了,回头一看,这个月一篇文章都没有发,上个月忙着一个人做项目,项目忙 ...

echarts柱状图横向排行榜实战开发

echarts柱状图横向排行榜实战开发相关推荐

最新文章

热门文章