网站建设工作整改报告,返利网站开发,什么是网站被黑,深圳住房和建设局网站咨询窗口由于项目需要一个数据大屏页面#xff0c;所以今天学习了vue结合echarts的图标绘制
首先需要安装ECharts
npm install echarts --save因为只是在数据大屏页面绘制图表#xff0c;所以我们无需把它设置为全局变量。
可以直接在该页面引入echarts#xff0c;就可以在数据大…由于项目需要一个数据大屏页面所以今天学习了vue结合echarts的图标绘制
首先需要安装ECharts
npm install echarts --save因为只是在数据大屏页面绘制图表所以我们无需把它设置为全局变量。
可以直接在该页面引入echarts就可以在数据大屏页面使用echarts的所有组件了
import * as echarts from echarts;且echart自带明亮和黑暗主题可以一句代码进行设置
//明亮
var chart echarts.init(dom, light);//黑暗
var chart echarts.init(dom, dark); 示例 还可以使用主题编辑器根据需要修改图标的样式主题颜色
主题编辑器 - Apache ECharts
自定义好主题之后可以导出主题代码保存为一个js文件引入目标页面在代码中使用该主题
vue结合echart主题编辑器的使用方法如下
示例原本我写的示例代码里默认样式长这样 首先我们去主题编辑器里选择好一个主题下载它的json版本代码 点击左上角的【下载主题】 复制点击复制后官方文档还贴心的给出了提示【已复制到剪贴板请保持至*.json文件】 那么我们就到vue中创建一个js文件把我们复制的代码放进去备用 别忘了js文件末尾要记得声明 接着需要使用该主题的vue文件中导入主题
第一步引入js文件
import theme from ./echarts_test 第二步 注册主题 ECharts.registerTheme(chalk,chalk);
第三步给init传入第二个参数使用主题 this.myChart ECharts.init(document.getElementById(main),chalk);
完成
实现效果 变成了⬇⬇⬇⬇⬇⬇⬇⬇
