vue - vue中使用echart实现柱状图和折线图

vue中使用echart实现柱状图和折线图，所用到的数据会放到最后面，在costRate.js里面；

1，先看效果图

一些重要注释我都写到代码里面了；第一个图柱状图，第二个是折线图

2，代码实现

<template><div><div class="container"><!-- 柱状图（上下对称柱状图）   综合成本率--><div id="costRate"></div><!-- 折线图  总况趋势--><div id="brokenLine"></div></div></div>
</template>
<script>
import { rateList, brokenLine } from './data/costRate';
export default {components: {},data() {return {rateList: null,brokenLine: null,};},// 1，保存一份数据created() {this.rateList = rateList;this.brokenLine = brokenLine;},//,2，页面挂载完成后调用  开始绘图mounted() {this.costRate();this.brokenLineFun();},methods: {/* 1，对称柱状图 */costRate() {// 日期列表处理let dataList = this.rateList.map((item) => {return parseInt(item.updatedate.substring(5, 7)) + '月';});// y轴的数据列表处理let huanList = this.rateList.map((item) => {return {value: item.huanbi.split('%')[0],datas: [item.huanbi.split('%')[0], item.costRate.split('%')[0], item.lastCostRate.split('%')[0]],};});console.log('huanList:', huanList);console.log('dataList:', dataList[0]);// 1，挂载节点  需要和模板上面 id="costRate"节点相对应，否则不能渲染出来let myEcharts = this.$echarts.init(document.getElementById('costRate'));// 2，这是设置 图表的重要属性选项let options = {// 标题title: {text: '综合成本率',},// 右上角的环比// 如果 data 没有被指定，会自动从当前系列中获取。多数系列会取自 series.name 或者 series.encode 的 seriesName// 所指定的维度。如 饼图 and 漏斗图 等会取自 series.data 中的 name。legend: {right: 10,data: [{name: '环比',// 强制设置图形为圆。icon: 'rect',// 设置文本为红色textStyle: {color: 'black',},},],},// 提示框组件  鼠标移入会提示tooltip: {trigger: 'axis',textStyle: {fontSize: 12,},formatter: (params) => {let html =`<div>月份：${params[0].name}</div>` +`<div>${params[0].marker}${params[0].seriesName}:${params[0].value}%</div>` +`<div>${params[0].marker}当月:${params[0].data.datas[1]}%</div>` +`<div>${params[0].marker}上月:${params[0].data.datas[2]}%</div>`;return html;},},color: ['#aedcf6'], //饼状图每块颜色// x轴xAxis: [{type: 'category',data: dataList,axisPointer: {type: 'shadow', // 阴影指示器},// 坐标轴刻度标签的显示间隔，在类目轴中有效// 如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。axisLabel: {interval: 0,},},],// 纵坐标信息 y轴yAxis: {name: '比例(%)',type: 'value',// 轴线设置axisLine: {show: true, // 是否显示刻度标签。},// 刻度显示axisTick: {show: true,},},// y轴上的数据series: [{name: '环比',type: 'bar',data: huanList,},],};// 开始进行正式渲染myEcharts.setOption(options);},/* 2，折线图 有两根折线 */brokenLineFun() {// 初始化用到的数据let XList = [],YList = [],avgList = [];this.brokenLine.forEach((item) => {XList.push(parseInt(item.time) + '月');YList.push(item.number);avgList.push(item.avg);});//  重要：挂载节点let myEcharts = this.$echarts.init(document.getElementById('brokenLine'));let options = {// 标题title: {text: '保费',},// 图例 注意： 需要与series里面的name的值向对应 否则不会出现legend: {icon: 'rect',itemHeight: 1,data: ['日保费', '日平均保费'],},// 提示框组件tooltip: {trigger: 'axis',textStyle: {// 设置文本相关属性color: 'white',fontSize: 12,},backgroundColor: 'rgba(50,50,50,0.7)', // 背景颜色formatter: (params) => {let html = `<div>时间：${params[0].name}</div>` + `<div>${params[0].marker}日保费:${params[0].data}万元</div>` + `<div>${params[1].marker}日保费:${params[1].data}万元</div>`;return html;},},// 后面网格线的一些设置// grid: {//   left: '3%',//   right: '4%',//   bottom: '3%',//   containLabel: true,// },// x轴xAxis: [{type: 'category',data: XList,},],// y轴yAxis: {type: 'value',name: '单位:万元',nameTextStyle: {fontSize: 12,color: '#111',},// 轴线设置axisLine: {show: true, // 是否显示刻度标签。},// 刻度显示axisTick: {show: true,},// 坐标轴在 grid 区域中的分隔线。splitLine: {show: true,lineStyle: {width: 1,type: 'dashed', //虚线},},},// 这里面的data是series: [// 第一个折线{id: 'current',name: '日保费',type: 'line',data: YList,symbol: 'none', //折线图不显示转折点// 折线的相关样式lineStyle: {opacity: '0.5',smooth: true,color: '#ff5a39',width: 1,},itemStyle: { normal: { color: '#ff5a39' } },},// 第二个折线{id: 'average',name: '日平均保费',type: 'line',data: avgList,symbol: 'none', //折线图不显示转折点lineStyle: {opacity: '0.5',smooth: true,color: '#3097ff',width: 1,},itemStyle: { normal: { color: '#3097ff' } },},],};myEcharts.setOption(options);},},
};
</script>
<style lang="scss" scoped>
.container {background-color: #f1f1f1;width: 90%;// margin: 0 auto;border: 1px solid balck;display: flex;justify-content: flex-start;align-items: center;flex-direction: row;flex-wrap: wrap;#costRate {width: 400px;height: 400px;margin-right: 30px;margin-top: 20px;}#brokenLine {width: 400px;height: 400px;margin-right: 30px;margin-top: 20px;}
}
</style>

3，costRate.js 这两个图表用到的json数据

// 1，对称柱状图的数据
export const rateList = [{costRate: '107.7%', // 当月huanbi: '+0%', // 环比lastCostRate: '0%', // 上月tongbi: '+0%',updatedate: '2020-01', // 日期},{costRate: '101.3%',huanbi: '-6.7%',lastCostRate: '107.7%',tongbi: '+0%',updatedate: '2020-02',},{costRate: '100.1%',huanbi: '-1.3%',lastCostRate: '101.3%',tongbi: '+0%',updatedate: '2020-03',},{costRate: '101.6%',huanbi: '+1.7%',lastCostRate: '100.1%',tongbi: '+0%',updatedate: '2020-04',},{costRate: '102.2%',huanbi: '+0.7%',lastCostRate: '101.6%',tongbi: '+0%',updatedate: '2020-05',},{costRate: '102.2%',huanbi: '+0%',lastCostRate: '102.2%',tongbi: '+0%',updatedate: '2020-06',},{costRate: '101.3%',huanbi: '-1%',lastCostRate: '102.2%',tongbi: '+0%',updatedate: '2020-07',},{costRate: '103.3%',huanbi: '+2.2%',lastCostRate: '101.3%',tongbi: '+0%',updatedate: '2020-08',},{costRate: '105.4%',huanbi: '+2.3%',lastCostRate: '103.3%',tongbi: '+0%',updatedate: '2020-09',},{costRate: '104.2%',huanbi: '-1.3%',lastCostRate: '105.4%',tongbi: '+0%',updatedate: '2020-10',},
];// 2，折线图的数据  注意：单位是万元 图例分为：日保费 日平均保费
export const brokenLine = [{avg: 455, // 平均值number: 221, // 日保费time: '01', // 第几日},{avg: 455,number: 151,time: '02',},{avg: 455,number: 151,time: '03',},{avg: 455,number: 147,time: '04',},{avg: 455,number: 165,time: '05',},{avg: 455,number: 183,time: '06',},{avg: 455,number: 232,time: '07',},{avg: 455,number: 732,time: '08',},{avg: 455,number: 708,time: '09',},{avg: 455,number: 721,time: '10',},{avg: 455,number: 684,time: '11',},{avg: 455,number: 577,time: '12',},{avg: 455,number: 638,time: '13',},{avg: 455,number: 737,time: '14',},{avg: 455,number: 276,time: '15',},{avg: 455,number: 241,time: '16',},{avg: 455,number: 717,time: '17',},{avg: 455,number: 611,time: '18',},{avg: 455,number: 531,time: '19',},{avg: 455,number: 554,time: '20',},{avg: 455,number: 614,time: '21',},{avg: 455,number: 235,time: '22',},{avg: 455,number: 173,time: '23',},{avg: 455,number: 634,time: '24',},{avg: 455,number: 544,time: '25',},{avg: 455,number: 604,time: '26',},{avg: 455,number: 544,time: '27',},{avg: 455,number: 723,time: '28',},{avg: 455,number: 253,time: '29',},{avg: 455,number: 186,time: '30',},{avg: 455,number: 626,time: '31',},
];

vue - vue中使用echart实现柱状图和折线图相关推荐

常用echart图表(柱状图、折线图、饼图、环形进度条、雷达图等等)基础配置和用法、resize()响应、轮播tooltip
一.最简单的使用方式引入官方echart.js即可 <script src="js/echarts.js"></script> 二.页面准备一个DOM容器 ...
python画柱状图和折线图-Python读取Excel表格,并同时画折线图和柱状图的方法
今日给大家分享一个Python读取Excel表格,同时采用表格中的数值画图柱状图和折线图,这里只需要几行代码便可以实. 首先我们需要安装一个Excel操作的库xlrd,这个很简单,在安装Python后 ...
vue项目中如何使用有向无环图（dag-diagram）
vue项目中如何使用有向无环图(dag-diagram) 1.自定义右击事件偶现问题 2.节点删除再添加反复操作几次会出现,删除一个节点多个节点一起消失 3.检测是否成环关于有向无环图在vue项目中 ...
vue3中，echarts使用（一）——柱状图和折线图的结合使用
vue3中,echarts使用(一)--柱状图和折线图的结合使用官网:https://echarts.apache.org/zh/index.html 官网示例:https://echarts.ap ...
ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决
ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决参考文章: (1)ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决 (2)https://ww ...
java使用poi在word中生成柱状图、折线图、饼图、柱状图+折线图组合图、动态表格、文本替换、图片替换 springboot项目
本文参考地址:https://blog.csdn.net/u014427811/article/details/100771314 在参考文章的基础上,增加了模板样例模板样例地址百度网盘链接:h ...
python双柱状图与双折线图_双坐标实现图标中同时存在柱状图和折线图
工作中经常会遇到在处理数据的时候,需要将柱状图和折线图同时放到一张表中,这怎么实现的呢,下面将讲述. 工具/原料 excel表方法/步骤 1 以上表为例,将不良品重量和不良品率同时做到一张表上为目标 ...
Web在jsp页面中生成柱状图，折线图，饼状图
一.前言在实际开发过程中,柱状图,折线图,饼状图在一些OA,ERP中是非常常见的功能,特别是需求方是业务型,数据分析型公司,下面的例子简单实现了饼状图,柱状图,折线图在jsp中生成.(ps:新手上路 ...
java使用poi在word模板中替换柱状图、折线图、饼图、表格、文本、图片
介绍 java使用poi在word模板中替换柱状图.折线图.饼图.表格.文本.图片软件架构安装教程环境搭建:jdk1.8.0_291.maven1.8.0_291 IDEA工具:IntelliJ ...

vue - vue中使用echart实现柱状图和折线图

vue - vue中使用echart实现柱状图和折线图相关推荐

最新文章

热门文章