echarts常见图形-横向排行榜柱状图(一)

1.最终效果图

2.下载安装echarts(main.js)

import echarts from "echarts";
Vue.prototype.$echarts = echarts;

3.echarts 文件（njyyfx.js）

function compareSort(property) {
  return function(a, b) {
    let value1 = a[property];
    let value2 = b[property];
    return value2 - value1;
  };
}

export let njyyfxEcharts = dataArr => {
  // let dataArr = [
  //   {
  //     name: "南京市",
  //     value: 52
  //   },
  //   {
  //     name: "苏州市",
  //     value: 152
  //   },
  //   {
  //     name: "无锡市",
  //     value: 252
  //   },
  //   {
  //     name: "常州市",
  //     value: 352
  //   },
  //   {
  //     name: "镇江市",
  //     value: 452
  //   }
  // ];
  let dfColor = [
    {
      type: "linear",
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [
        {
          offset: 1,
          color: "#0f48aa" // 0% 处的颜色
        },
        {
          offset: 0,
          color: "#09345c" // 100% 处的颜色
        }
      ],
      global: false // 缺省为 false
    },
    {
      colorEnd: "#3a7bff"
    }
  ];
  let yData = [];
  let arr = [];
  let arr2 = [];
  dataArr.map(item => {
    yData.push(item.name);
    arr.push({
      value: item.value,
      itemStyle: {
        color: dfColor
      }
    });
    arr2.push({
      value: item.value,
      itemStyle: {
        color: dfColor[1].colorEnd
      }
    });
  });
  let sData1 = arr.sort(compareSort("value"));
  let sData2 = arr2.sort(compareSort("value"));

  let option = {
    tooltip: {
      trigger: "axis",
      show: true,
      axisPointer: {
        type: "shadow"
      },
      formatter: function(objs) {
        let obj = objs[0];
        return `${obj.name}<br/>${obj.marker}${obj.seriesName} : ${obj.value} 个`;
      }
    },
    grid: {
      top: "3%",
      left: "8%",
      right: "10%",
      bottom: "1%",
      containLabel: true
    },
    xAxis: {
      type: "value",
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitLine: {
        show: false
      }
    },
    yAxis: {
      type: "category",
      boundaryGap: true,
      inverse: true, //反向
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        margin: 0,
        formatter: function(value, index) {
          let ind = index + 1;
          if (ind == 1) {
            return "{one|" + ind + "} {a|" + value + "}";
          } else if (ind == 2) {
            return "{two|" + ind + "} {b|" + value + "}";
          } else if (ind == 3) {
            return "{three|" + ind + "} {c|" + value + "}";
          }
          return "{four|" + ind + "} {d|" + value + "}";
        },
        rich: {
          a: {
            color: "#59c9f9"
          },
          b: {
            color: "#59c9f9"
          },
          c: {
            color: "#59c9f9"
          },
          d: {
            color: "#59c9f9"
          },
          one: {
            backgroundColor: "#66255c",
            color: "white",
            // padding: 10,
            width: 15,
            height: 15,
            lineHeight: 15,
            align: "center",
            borderRadius: 8,
            fontSize: 8
          },
          two: {
            backgroundColor: "#695a28",
            color: "white",
            width: 15,
            height: 15,
            lineHeight: 15,
            align: "center",
            borderRadius: 8,
            fontSize: 8
          },
          three: {
            backgroundColor: "#045788",
            color: "white",
            width: 15,
            height: 15,
            lineHeight: 15,
            align: "center",
            borderRadius: 8,
            fontSize: 8
          },
          four: {
            backgroundColor: "#061d36",
            color: "white",
            width: 15,
            height: 15,
            lineHeight: 15,
            align: "center",
            borderRadius: 8,
            fontSize: 8
          }
        }
      },
      data: yData
    },
    series: [
      {
        name: "销售量",
        barWidth: 8,
        type: "bar",
        label: {
          normal: {
            show: false,
            position: "insideLeft",
            formatter: "{c}",
            textStyle: {
              color: "#fff"
            }
          }
        },
        data: sData1
      },
      {
        name: "销售量",
        type: "pictorialBar",
        barGap: "100%",
        symbol: "rect",
        symbolPosition: "end",
        symbolRotate: "90",
        symbolSize: [8, 2],
        symbolOffset: [10, 0],
        data: sData2,
        color: "red"
      }
    ]
  };
  return option;
};

4.vue文件中

4.1 html

<div  ref="njyyfxChart" style="width:30vh,height:30vh"></div>

4.2 引入njyyfx.js

<script>
	import { njyyfxEcharts } from "@/assets/js/nchx/njyyfx"; // 农机拥有分析
	export default {
		data(){},
		methods: {
			// 农机拥有分析
		    njyyfx() {
				    let njyyfxChartEchart = this.$echarts.init(this.$refs.njyyfxChart);
				   	let dataArr = [
								    {
								      name: "南京市",
								      value: 52
								    },
								    {
								      name: "苏州市",
								      value: 152
								    },
								    {
								      name: "无锡市",
								      value: 252
								    },
								    {
								      name: "常州市",
								      value: 352
								    },
								    {
								      name: "镇江市",
								      value: 452
								    }
								  ];
				    njyyfxChartEchart.setOption(njyyfxEcharts(dataArr));
			},
			// 初始化图形
    		initEcharts() {
				let njyyfxChartEchart = this.$echarts.init(this.$refs.njyyfxChart); //农机拥有分析
				window.addEventListener("resize", function() {
			        njyyfxChartEchart.resize(); //农机拥有分析
			    });
			}
		},
		mounted() {
			this.njyyfx(); //农机拥有分析
			this.initEcharts();
		}
	}
</script>