基于Echarts的桑葚图组件

第一次用，代码和图如下

 <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: "Biomass imports", itemStyle: { color: "#dde2f4" } },{ name: "Coal reserves", itemStyle: { color: "#5f80b8" } },{ name: "Coal imports", itemStyle: { color: "#6990aa" } },{ name: "Gas reserves", itemStyle: { color: "#8599d3" } },{ name: "Gas imports", itemStyle: { color: "#6183b5" } },{ name: "Wind", itemStyle: { color: "#d5c962" } },{ name: "Wave", itemStyle: { color: "#5a79c0" } },//第二列{ name: "Bio-conversion", itemStyle: { color: "#f7b35b" } },{ name: "Coal", itemStyle: { color: "#6d96a5" } },{ name: "Ngas", itemStyle: { color: "#7eaf8f" } },//第三列{ name: "Solid", itemStyle: { color: "#f39260" } },{ name: "Gas", itemStyle: { color: "#a1cb71" } },//第四列{ name: "Thermal generation", itemStyle: { color: "#ea7ccc" } },//第五列{ name: "Electricity grid", itemStyle: { color: "#6f9a69" } },{ name: "District heating", itemStyle: { color: "#6e98a3" } },],linksData: [//第一列{ "source": "Nuclear", "target": "Thermal generation", "value": "60" },{ "source": "UK land based bioenergy", "target": "Bio-conversion", "value": "15" },{ "source": "Agricultural waste", "target": "Bio-conversion", "value": "8" },{ "source": "Marine algae", "target": "Bio-conversion", "value": "10" },{ "source": "Biomass imports", "target": "Coal", "value": "3" },{ "source": "Coal reserves", "target": "Coal", "value": "6" },{ "source": "Coal imports", "target": "Coal", "value": "2" },{ "source": "Gas reserves", "target": "Ngas", "value": "35" },{ "source": "Gas imports", "target": "Ngas", "value": "3" },{ "source": "Wind", "target": "Electricity grid", "value": "25" },{ "source": "Wave", "target": "District heating", "value": "5" },//二{ "source": "Bio-conversion", "target": "Solid", "value": "33" },{ "source": "Coal", "target": "Solid", "value": "18" },{ "source": "Ngas", "target": "Gas", "value": "25" },//三{ "source": "Solid", "target": "Thermal generation", "value": "40" },{ "source": "Gas", "target": "Thermal generation", "value": "50" },//四{ "source": "Thermal generation", "target": "Electricity grid", "value": "80" },{ "source": "Thermal generation", "target": "District heating", "value": "30" },],//图中数据};},watch: {},created () {},mounted () {this.$nextTick(() => {this.setEcharts();})//监听界面大小，让echarts自适应const _this = this;const erd = elementResizeDetectorMaker();erd.listenTo(document.getElementById("mulberryEchartsFather"), () => {_this.$nextTick(() => {this.$echarts.init(document.getElementById("mulberryEcharts")).resize();});});},methods: {//饼图setEcharts () {var myChart = echarts.init(document.getElementById('mulberryEcharts'));var option = {//标题title: {text: 'Sankey Diagram',},// color: ["#e2eae7"],//工具提示tooltip: {trigger: 'item',triggerOn: 'mousemove'},series: [{//图的类型type: 'sankey',layout: 'none',//图中所用数据，就是上面引入的数据，包括节点和关联两部分data: this.legendData,links: this.linksData,itemStyle: {normal: {borderWidth: 1,borderColor: '#aaa'}},//线条样式lineStyle: {color: 'gradient',curveness: 0.5}}]}myChart.setOption(option);},}
};
</script>
<style lang="scss" scoped>
.mulberryEchartsFather {width: 100%;height: 100%;#mulberryEcharts {width: 100%;height: calc(100% - 40px);background: white;}
}
</style>

基于Echarts的桑葚图组件相关推荐

[Vue2]基于vue-workflow-chart的DEG图组件
[vue2]基于vue-workflow-chart的DEG图组件 vue-workflow-chart调用 <workflow-chart:style='size':transitions=' ...
echart 时间滚动_基于 ECharts 封装甘特图并实现自动滚屏
项目中需要用到甘特图组件,之前的图表一直基于 EChart 开发,但 EChart 本身没有甘特图组件,需要自行封装经过一番鏖战,终于完成了... 我在工程中参考 v-chart 封装了一套图表组件 ...
vue 改变domclass_基于 vue 开发甘特图组件的心路历程（兼设计分享）
语雀原文有更好的排版体验~ 这篇文章主要讲述笔者开发 v-gantt 甘特图组件的经过. 起源公司项目有个甘特图的需求. 笔者考察了世面上常见的甘特图组件后,本着我上我也行的心态,以及考虑 ...
基于vue的svg画线_基于SVG的Vue图组件库
基于vue的svg画线图表 (diagram-vue) A vue component library of diagrams. Vue组件图库. View Demo 查看演示 Download S ...
[VUE2/VUE3]基于echarts的动态折线图组件
[VUE2/VUE3]基于echarts的动态折线图组件时间格式化代码 export default function formatSecond(value: number) {let millis ...
Angular2组件与Echarts饼状图交互之饼图制作
一.前言 1.基于ng4项目 2.组件包括:根组件app和饼状图组件echart 二.饼状图开发过程 1.添加插件 echart cnpm install echarts --save 2.创建组件 ...
【26】地图可视化：基于 Echarts + Java SpringBoot 的动态实时地图组件 - 点气泡流向组合区域三级下钻地图
在数据可视化大屏中,地图可视化是常用的高级图表之一. 很多小伙伴们以为地图太高大上了,那么实现起来估计也不容易,说实话,确实不那么容易,直接用echarts是要花些时间研究的,但是我们可以将其二次封装 ...
【26】地图可视化：基于 Echarts + Flask 的动态实时地图组件 - 点气泡流向组合区域三级下钻地图
目录一.大屏整体架构 Echarts + Flask + Bootstrap 1. 效果展示动态效果鼠标右键切换主题 2. 前端布局 Bootstrap 3. HTTP 服务端使用 Flask ...
echarts折线图怎么从y轴开始_基于echarts的双y轴实时更新折线图
一款基于echarts的双y轴实时更新折线图效果,页面加载后开始自动更新数据并绘制对应的折线图,可以点击右上角的按钮:显示数据视图.刷新数据和将数据存储为png的图片. 查看演示下载资源: 46 次 ...

基于Echarts的桑葚图组件

基于Echarts的桑葚图组件相关推荐

最新文章

热门文章