echarts-折线图-echarts字体大小自适应

<template><div><div><!--为echarts准备一个具备大小的容器dom--><div id="org_ech_line"></div></div></div>
</template><script>
import * as echarts from 'echarts'
export default {data() {return {is_condolences: 0, // 控制收入折线图isAll: 0,is_active: 0,//// charts: '',/*  opinion: ["1", "3", "3", "4", "5"], */opinionData: ['3', '2', '4', '4', '5'],//incomeLineData: ['3', '2', '4', '4', '5'] // 主要收入情况-折线数据}},methods: {// 组织建设-折线图orgLine(id) {const charts = echarts.init(document.getElementById(id))charts.setOption({tooltip: {trigger: 'axis',showContent: true, // 鼠标悬停-提示信息 false-不提示 true-提示formatter: '组织数量: {c0}'},// legend: {//   data: ['近七日收益']// },// legend: {//   data: ['近七日收益'] //标题// 设置图例前面样式// itemStyle: {//   color: 'blue'// },// 设置图例文字颜色// textStyle: {//   // color: '#4996f5'//   color: 'red'// }// },grid: {left: '3%',top: '10%',right: '4%',bottom: '10%',// 设置文字溢出正常显示containLabel: true,// 显示网格-显示边框show: false// 设置边框颜色// borderColor: '#01233e'},//  释放开会显示 -右上角下载按钮// toolbox: {//   feature: {//     saveAsImage: {}//   }// },xAxis: {type: 'category',// boundaryGap: false, //控制 X轴 第一个值 是紧挨Y轴还是 不紧挨Y轴 false-紧挨Y轴  ture-不紧挨data: ['2017', '2018', '2019', '2020', '2021'],// 设置文字颜色axisLabel: {// show: true,  //是否显示X轴下面文字color: '#6e7379', // 更改坐标轴文字颜色fontSize: 12 // 更改坐标轴文字大小},// 隐藏刻度线axisTick: {show: false // false-隐藏  true-不隐藏},axisLine: {lineStyle: {// color: 'transparent' // 更改坐标轴颜色  -隐藏刻度线// color: 'red' // 更改坐标轴颜色}}},yAxis: {type: 'value',// 隐藏刻度线axisTick: {show: false},max : 200,min : 0,splitNumber : 5,//!!!吧Y轴分割成5分,份数可以改boundaryGap : [ 0.2, 0.2 ]axisLine: {lineStyle: {// color: 'transparent' // 更改坐标轴颜色  -隐藏刻度线// color: 'transparent' // 更改坐标轴颜色}},//  改变y轴字体颜色和大小// 设置文字颜色axisLabel: {show: true, // 是否显示Y轴左面的文字color: '#6e7379', // 更改坐标轴文字颜色fontSize: 12 // 更改坐标轴文字大小}},// series: [{//   name: '组织数量',//   type: 'line',//   // stack: '总量',//   data: this.opinionData,//   itemStyle: {//     normal: {//       color: '#51BAE4' //  给折线添加颜色//     }//   }// }]series: [{name: '搜索引擎',type: 'line',symbol: 'circle', // 拐点设置为实心symbolSize: 8, // 拐点大小stack: '总量',animation: true, // false: hover圆点不缩放 .true:hover圆点默认缩放lineStyle: {normal: {color: 'red', // 折线的颜色width: '2'// 折线粗细}},itemStyle: {normal: {color: 'blue', // 拐点颜色borderColor: '#000000', // 拐点边框颜色borderWidth: 3// 拐点边框大小},emphasis: {color: '#000000'// hover拐点颜色定义}},areaStyle: {normal: {color: '#999999'// 折线下面区块的颜色}},data: [820, 932, 901, 934, 1290, 1330, 1320]}]})}},// 调用mounted() {this.$nextTick(function() {this.orgLine('org_ech_line')// this.incomeLine('income_ech_line')})// this.$nextTick(function() {//   this.incomeLine('income_ech_line')// })}
}
</script><style>#org_ech_line{width: 500px;height: 500px;}
</style>

echarts字体大小自适应

参考了以下链接
添加链接描述

echarts-折线图-echarts字体大小自适应相关推荐

echarts 折线图悬停拐点大小不变_echarts-折线图（折线虚实/颜色与拐点样式修改）...
效果图如下图所示 1.绘制一个图表时,需要有一个给定宽高的容器:基本配置可以阅读echarts的文档:里面有很多示例demo~~ html 结构: css样式: #box{ width: 600px; ...
e-charts折线图自适应外层div大小
问题描述: 在tabs页签下使用e-charts折线图,切换tab页签e-charts折线图无法自适应外层div大小: 解决方案: 添加监听器监听浏览窗口变化,两种监听方法 window.addEve ...
HTML设置字体大小自适应屏幕与echarts图表颜色根据数据大小实时刷新图表颜色
设置html文字大小根据页面大小自适应,在使用rem之前是使用的px和百分比,后来发现页面缩放或在小屏幕的电脑显示不尽人意,后改用rem,写法如:font-size: .21rem;或font-siz ...
echarts折线图动态多条线
echarts折线图配置项由于工作中遇到的图表特别多,每次用过配置项总是想不起来,在这里记录一下,希望也可以帮到路过的你.话不多说我们上图: 左边的是设计稿,右边的是echarts的示例图,我们先找 ...
超全的echarts折线图样式整理
超全的echarts折线图样式整理本次记录了echarts的折线颜色修改.自定义展示折线最后一个数值内容.自定义折线内容颜色.自定义折线图缩放展示.x轴线条粗细调整.x轴箭头单箭头调整.y轴线条粗细 ...
Echarts折线图属性设置大全
Echarts折线图属性设置大全 var option = {backgroundColor: '#FFF0F5',title: {text: '折线图',subtext: '模拟数据',x: 'ce ...
Echarts 折线图完全配置指南 - 手把手教你设置 Echarts 折线图详细教程
本文首发:<Echarts 折线图完全配置指南> Echarts 折线图是图表中最常用的显示形式之一.使用 Echarts 做出基本的折线图很简单,但要是想把多组数据放在一张图表中,展示的 ...
echarts折线图拐点样式设置
echarts折线图拐点样式设置代码详情: series: [{name: '发文篇数',type: 'line',// smooth: true,showSymbol: true,symbol: ...
Echarts折线图案例
问题:重置echarts折线图时,总会出现多个数据的拐点,与实际渲染的数据拐点不符合. 解决: 在实例化echarts后 clear 上一次的图. myEcharts.clear() 案例 impor ...

echarts-折线图-echarts字体大小自适应

echarts字体大小自适应

echarts-折线图-echarts字体大小自适应相关推荐

最新文章

热门文章