rendering
Bar charts sometimes need to be marked with maximum and minimum values, or an average line may be added to distinguish whether the data is higher or lower. This article records the corresponding configuration items. Let’s have a look at the renderings first:
Code attached
The markPoint property in the series is used to configure the maximum and minimum values, and the markLine is used to set the average
<template> <div id="echart"></div> </template> <script> import Echarts from "echarts"; export default { data() { return { myChart: null, option: { tooltip: { show: true, }, xAxis: { data: [" shirt "and" sweater ", "snow spins unlined upper garment", "pants", "high heels", "socks"],}, yAxis: {type: "value",}, color: "# baf," series: [{name: "sales", type: "Bar", data: [5, 20, 36, 10, 10, 20], / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- down here -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- markPoint: Data: [{type: "Max ", name:" I am the maximum ",}, {type: "min", name: "I am the maximum ", "I am a minimum,"},],}, markLine: {/ / set the average data: [{type: "business", the name: "I am average," color: # baf "}]}. / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- up here -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the label: {/ / show the value of the concrete column show: true}},,,}}; }, mounted() { this.drawEcharts(); }, methods: { drawEcharts() { this.myChart = Echarts.init(document.getElementById("echart")); this.myChart.setOption(this.option); window.addEventListener("resize", () => { this.myChart.resize(); }); ,}}}; </script> <style lang="less" scoped> #echart { width: 100%; height: 600px; } </style>For more detailed control, go to the official website to see the corresponding configuration items