vue引用echarts折线平滑面积图

vue中安装 echarts 不会用的有入门篇介绍文章： https://blog.csdn.net/qq_42221334/article/details/95354424

主要代码：


<template><div><div class="cardList_title">用户活跃度</div><div class="Chart_one" id="myChartCurve"></div></div></template><script>
export default {data() {return {}},mounted() {this.drawLine();},methods: {drawLine(){//================== 用户活跃度=========================let myChartCurve = this.$echarts.init(document.getElementById('myChartCurve'))myChartCurve.setOption({color: ["#fcc550",'#4fd7fd'],tooltip : {trigger: 'axis',axisPointer : {            // 坐标轴指示器，坐标轴触发有效type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'}},legend: {data:['普通用户','租户用户'],textStyle: {fontSize: '12',color:'#fff'}},xAxis: {type: 'category',boundaryGap: false,data: ['1', '2', '3', '4', '5', '6', '7','8','9','10','11','12'],axisLabel: {textStyle: {fontSize: '12',color:'#fff'}},},yAxis: {type: 'value',axisLabel: {textStyle: {fontSize: '12',color:'#fff'}},},series: [{name:'普通用户',smooth:true,data: [0, 180, 400, 300, 130, 150, 400,200,100,300,200,100],type: 'line',areaStyle: {}},{name:'租户用户',smooth:true,data: [0, 150, 350, 200, 400, 500, 280,180,150,300,200,0],type: 'line',areaStyle: {}}]        });}}},
</script>

更多echarts官方实例请看：https://gallery.echartsjs.com/explore.html#sort=createTime~timeframe=all~author=all

更多技巧请查看vue专栏 https://blog.csdn.net/qq_42221334/column/info/27230/1

vue引用echarts折线平滑面积图相关推荐

Vue+Echarts数据可视化(面积图)
Vue+Echarts数据可视化(面积图) 最近公司开发需要使用Echarts来进行数据展示,稍微记录一下.先看效果图: 话不多说,直接上代码: 1.使用npm下载安装Echarts依赖(下载速度慢可 ...
vue中echarts折线图双折线，鼠标悬浮时间，将两个X轴的内容以及Y轴的内容全部显示出来
vue中echarts折线图双折线,鼠标悬浮时间,将两个X轴的内容以及Y轴的内容全部显示出来: 只要修改一个地方,用formatter方法 tooltip: {trigger: 'axis',axis ...
Vue 封装Echarts折线图
1.当前页面引用echarts import * as echarts from "echarts"; 2.获取到折线图数据方法里,把值传到以下方法里 hanndlemonthSv ...
vue实现echarts折线图横坐标可以拖动
大佬的链接: https://www.cnblogs.com/ss977/p/9969758.html 官网的链接: https://echarts.apache.org/examples/zh/ed ...
Vue 中 Echarts绘图在一个圆环图或多个圆环图中间插入图片插入文字（考虑到浏览器大小兼容问题）
之前一直掉进这个坑,没有跳出来,导致自己在这个问题上搞了很久,今天把这个坑写出来,避免大家都去踩这个坑啊~ 在Vue项目结构中,如果引入图片的url不成功,记住,请一定要试一试在路径外加上 requi ...
【echarts】vue引用 echarts 地图
1.在vue项目中安装echarts npm i echarts -S 或 cnpm i echarts -S 2.在用到echarts地图的vue单页面中引入: import echarts fro ...
vue中echarts初次加载图很小的问题
在vue的mounted中如果初始化数据的话,dom元素还没有完全加载完成,这时候echarts还是px和%混用,会造成加载出来的echarts很小处理方式,加载完成之后重绘一下: $(docume ...
vue中echarts使用记录
1. echarts的使用安装 npm i -S echarts@4.9.0 引入 main.js中引入(版本4.9.0) import Echarts from 'echarts' Vue.pro ...
vue使用Echarts画柱状图
目录 1 引入Echarts 1.1 安装 1.2 引入 2 基本柱状图 3 多列柱状图 4 柱状图样式设置 4.1 柱条样式 4.2 柱条间距 5 动态排序柱状图 6 总结 1 引入Echarts ...

vue引用echarts折线平滑面积图

vue引用echarts折线平滑面积图相关推荐

最新文章

热门文章