前言

写项目的时候每次用到echarts图，需要更改它的样式和字体的时候都要查半天才能写出来，好记性不如烂笔头真是亘古不变真理啊，所以就有了今天的这个记录性文章（具体内容以备注形式展示）这里就要用到echarts官网了，如有需要请前往查看(https://echarts.apache.org/examples/zh/index.html)

一、饼状图样式

在你需要引入图表的页面引入import * as echarts from 'echarts';

代码如下（示例）：

import * as echarts from 'echarts';var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;option = {tooltip: {trigger: 'item'},legend: {top: '5%',left: 'center'// textStyle:{//     color:"red"//提示标的文字颜色// }// itemStyle:{//   color:"red"//提示标的小方块图标的颜色// }},series: [{name: 'Access From',type: 'pie',radius: ['40%', '70%'],avoidLabelOverlap: false,label: {show: false,position: 'center'},emphasis: {label: {show: true,fontSize: 40,fontWeight: 'bold'// color:"red"//划过的提示文字颜色}},labelLine: {show: false},// color:["red","blue","green"],//色块颜色data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }]}]
};option && myChart.setOption(option);

二、柱状图样式

代码如下（示例）：

import * as echarts from 'echarts';var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;option = {legend: {data: ['Forest']},xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},textStyle: {color: 'red'}, //x,y轴字体颜色series: [{name:'Forest'//提示的标题内容，配合legend下面的data使用data: [120, 200, 150, 80, 70, 110, 130],color: ['green'], //柱体颜色type: 'bar'}]
};option && myChart.setOption(option);

二、折线图样式

代码如下（示例）：

import * as echarts from 'echarts';var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;option = {tooltip: {show: true},xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},textStyle: {color: 'red'}, //x,y轴字体颜色series: [{data: [150, 230, 224, 218, 135, 147, 260],color: 'red', //折线颜色type: 'line',smooth: true //是否平滑折线图}]
};option && myChart.setOption(option);

总结

以上就是今天要讲的内容，本文仅仅简单介绍了echarts图样式的一些修改内容，具体的展示效果需要您亲自去查看验证了。

关于echarts图的纵坐标横坐标提示语和title的颜色和字体修改相关推荐

我的世界服务器修改显示信息,我的世界自定义essentials插件提示语，个性化ESS插件消息_修改broadcast前缀...
前言默认的ESS插件的提示消息是没有带有前缀的,如果有想往ESS插件所提示的消息中加入前缀,如改为 "[XX服务器提示]" 这样的效果,或者是修改默认ESS插件的提示消息的颜色, ...
ios 权限提示语_撩妹神技？iOS 微信偷偷上线“拍一拍”
微信概要 / 最近微信新功能不断,安卓和 iOS 前后上线了「修改微信号」功能,给了网友们"重新做人"的机会,这不,又来了一个新功能,iOS 的微信可以"拍一拍&quo ...
python PyQt5中文教程☞【第二节】PyQt5基本功能（创建窗口、应用程序图标、显示提示语、通过按钮关闭窗口、消息框（关闭窗口确认框）、窗口显示在屏幕中间【居中显示】）
引用文章:http://code.py40.com/pyqt5/ 文章目录简单的例子:创建一个小窗口应用程序的图标显示提示语通过按钮关闭窗口消息框(关闭窗口确认框) 窗口显示在屏幕的中间[居 ...
Echarts图的属性大全，学会绝对可以把Echarts吃的透透的
Echarts图的属性大全,学会绝对可以把Echarts吃的透透的! 文章目录 Echarts图的属性大全,学会绝对可以把Echarts吃的透透的! backgroundColor背景色: toolt ...
selenium怎样定位web动态提示语
例如登录页面账号或密码输入错误则提示:账号或密码错误!但是因为是动态生成的所以来不及定位到. 下面是解决方式: 点击按钮出发提示语弹出快速将鼠标悬浮在提示语长按F8或者CTRL+\,直到页面出现p ...
关于echarts图中的柱状图添加横线问题
echarts图柱状图添加横线先看一下效果图: 话不多说先上代码,看注释应该能看懂点什么. // An highlighted blocklet that = this;let e5Data = t ...
ChatGPT角色扮演提示语
ChatGPT角色扮演提示语使用ChatGPT角色扮演提示语,你可以将GPT调教成各种专业角色,因此你也会获得更好的对话体验,学会调教GPT,你就会发现GPT实际上非常的强大.此处会长期更新GPT角 ...
微信小程序实现Echarts图的动态实时刷新
在微信小程序绘制折线图时,选择Echarts.官网如下:https://echarts.apache.org/zh/index.html 效果如下:(由于为截取动态图,只有实时图片结果) 微信小程序中 ...
提示语_交通安全提示语
一."一盔一带"提示语 1.安全带-生命带!驾车出行,莫忘安全! 2.安全带是"保命带""救命绳"! 3.乘车系好安全带,发生意外防伤害! ...

关于echarts图的纵坐标横坐标提示语和title的颜色和字体修改

前言

一、饼状图样式

二、柱状图样式

二、折线图样式

总结

关于echarts图的纵坐标横坐标提示语和title的颜色和字体修改相关推荐

最新文章

热门文章