基于Echarts的桑葚图组件

原创

已于 2023-12-01 09:47:52 修改 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

于 2021-06-17 10:56:22 首次发布

本文详细介绍了如何使用Echarts库创建桑葚图，包括配置项设置、数据映射和图表样式调整，适合于展示分组数据的分布情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

桑葚图
在这里插入图片描述

 <template>
	<div class="mulberryEchartsFather" id="mulberryEchartsFather">
		<el-row style="height:40px;">
			<el-date-picker v-model="timeValue" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
			</el-date-picker>
		</el-row>
		<div id="mulberryEcharts"></div>
	</div>
</template>
<script>
import elementResizeDetectorMaker from "element-resize-detector";
import * as echarts from 'echarts'
import $ from 'jquery'
export default {
     
     

	data () {
     
     
		return {
     
     
			timeValue: '',
			legendData: [
				//第一列
				{
     
      name: "Nuclear", itemStyle: {
     
      color: "#45a786" } },
				{
     
      name: "UK land based bioenergy", itemStyle: {
     
      color: "#94cc74" } },
				{
     
      name: "Agricultural waste", itemStyle: {
     
      color: "#7eb08e" } },
				{
     
      name: "Marine algae", itemStyle: {
     
      color: "#82b589" } },
				{
     
      name