echarts——折线图

需求

下拉切换显示不同商品的销量趋势图
根据屏幕大小适配标题和图例的大小
折线图颜色填充

源码

<template><div class="w100 h100"><div class="title"><selectname=""id=""@change="onChange":style="`fontSize:${size}px;height:${size + 4}px`"><option v-for="(v, k) in lineData" :key="k" :value="k">{{ v.title }}</option></select></div><div ref="line" class="w100 h100"></div></div>
</template><script>
import { ququ } from "../../public/static/theme/ququ";
export default {props: {msg: String,},data() {return {size: null, //基准字体大小——控制标题和图例的大小lineChart: null,lineData: {goods1: {title: "商品1销量趋势",data: [{name: "上海",data: [23, 33, 44, 22, 15, 27, 38, 42, 55, 10, 20, 38],},{name: "北京",data: [51, 11, 54, 55, 35, 57, 18, 45, 25, 20, 50, 18],},],},goods2: {title: "商品2销量趋势",data: [{name: "南京",data: [23, 33, 66, 22, 15, 27, 38, 62, 55, 10, 20, 38],},{name: "杭州",data: [21, 11, 44, 22, 12, 27, 18, 42, 22, 10, 20, 18],},],},},month: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月",],};},mounted() {/*** 需求：下拉切换显示不同商品的销量趋势图*/this.init();this.getData();// 监听屏幕大小变化window.addEventListener("resize", this.screenResize);// 一进来主动调取屏幕适配this.screenResize();},beforeDestroy() {window.removeEventListener("resize", this.screenResize);},methods: {// 初始化图表init() {this.$echarts.registerTheme("ququ", ququ);this.lineChart = this.$echarts.init(this.$refs.line, "ququ");// 拆分option：1、静态配置在初始化的时候先注册，每一次setOption是合并关系let initOption = {// 坐标轴grid: {top: "20%",left: "5%",right: "3%",bottom: "5%",containLabel: true, //是否包含坐标轴的文字},// X轴 type设置为categoryxAxis: {type: "category",boundaryGap: false, // 与坐标轴之间是否需要间距},// Y轴 type设置为valueyAxis: {type: "value",},// 图例legend: {show: true,top: 120,left: 50,icon: "circle", // 图例的形状textStyle: {color: "#fff",},},// 提示框设置tooltip: {trigger: "axis",show: true,},};this.lineChart.setOption(initOption);},// 切换商品类型onChange(e) {this.getData(e.target.value);},// 获取并处理数据，然后渲染图表getData(type) {if (!type) {type = Object.keys(this.lineData)[0];}// 定义一组颜色，用于渐变色let color1 = ["#fc97af", "#87f7cf", "#f7f494", "#72ccff", "#f7c5a0"];//   当前商品的折线图数据let data = this.lineData[type].data;//   生成series数据let seriesArr = data.map((item, index) => {return {name: item.name, //根据name自动生成图例type: "line",stack: "Total", // 堆叠图效果，每条折线图stack值相同data: item.data,smooth: true, // 光滑的弧线// 区域填充颜色 —— 渐变色areaStyle: {color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: color1[index] },{ offset: 1, color: "rgba(255, 255, 255, 0.1)" },]),},};});// 拆分option：2、data配置在获取导数据的时候注册，每一次setOption是合并关系let dataOption = {// x轴数据xAxis: {data: this.month,},// 折现数据series: seriesArr,};// 生成图表this.lineChart.setOption(dataOption);},// 监听屏幕变化screenResize() {this.$nextTick(() => {// 获取图表区域的宽度，作为基准值来设置其他需要动态改变的尺寸let width = this.$refs.line.offsetWidth;this.size = (width / 100) * 3.6; // 定义一个基准尺寸// 拆分option：3、受屏幕大小影响的配置在屏幕改变的时候setlet screenOption = {// 图例大小//   标题大小通过动态style来控制legend: {itemWidth: this.size / 1.5,itemHeight: this.size / 1.5,},};this.lineChart.setOption(screenOption);// 更新图表this.lineChart.resize();});},},
};
</script><style scoped lang="less">
.title {position: absolute;left: 20px;top: 20px;color: #fff;z-index: 999;select {height: 40px;background: transparent;border: none;color: white;font-weight: 700;padding-left: 20px;border-left: 8px solid #fff;line-height: 30px;option {background: #333;}}
}
</style>

echarts——折线图相关推荐

d3.js 教程模仿echarts折线图
今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...
echarts折线图默认显示最后一个点的数据
echarts折线图默认显示最后一个点的数据想要达到这种效果图如下: 如果你给折线图设置数据显示,那么要不就全部隐藏,要不就全部显示在折线上.实现指定点的显示就需要你自己去处理这个数据了. 方式有两 ...
Echarts折线图的平移假动画
Echarts折线图的平移假动画 #可视化项目中经常用图表的方式来展示数据,折线图是经常出现的,但是在echarts折线图中正常情况是通过删除数据的第一个,添加一个新数据在数组的末尾来实现动画,此动画 ...
echarts折线图设置圆点_echarts 设置折线图单个数据小圆圈样式
在使用echarts 折线图时,可能会遇到针对不同的数据显示不同的小圆点样式,经过查看echarts配置项,其中data中有一个value配置项选项,可以单独设置某一个数据的显示样式,具体使用方式如下 ...
echarts 折线图折线从头开始
在echarts折线图中,默认折线从刻度中心开始,我们为了图标的美观有时需要折线从头开始显示,一个配置项就可以轻松搞定. boundaryGap:false
echarts折线图折现下方显示阴影
echarts折线图折现下方显示阴影实现echarts折现下方显示渐变阴影区域代码: series: [{name: this.chartPropList[this.dataResource]. ...
echarts折线图动态多条线
echarts折线图配置项由于工作中遇到的图表特别多,每次用过配置项总是想不起来,在这里记录一下,希望也可以帮到路过的你.话不多说我们上图: 左边的是设计稿,右边的是echarts的示例图,我们先找 ...
e-charts折线图自适应外层div大小
问题描述: 在tabs页签下使用e-charts折线图,切换tab页签e-charts折线图无法自适应外层div大小: 解决方案: 添加监听器监听浏览窗口变化,两种监听方法 window.addEve ...
echarts折线图堆叠怎么设置_ECharts折线图堆叠设置为不堆叠的方法
下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...
echarts折线图填充颜色
Echarts折线图填充颜色 let chart = echarts.init(document.getElementById('main'));chart.setOption({title: {te ...

echarts——折线图

需求

源码

echarts——折线图相关推荐

最新文章

热门文章