ECharts实现动态切换主题样式 |
您所在的位置：网站首页 › echarts背景颜色vue如何改 › ECharts实现动态切换主题样式 |
|
ECharts是百度开源的一个JS数据可视化库。通过颜色主题可以轻松实现不同颜色样式的修改，也可以通过调色盘、直接样式设置、高亮样式等方法实现。 ECharts4 开始，除了一贯的默认主题外，新内置了两套主题，分别为 'light' 和 'dark'。使用方法如下： var chart = echarts.init(dom, 'light'); 主题可以在 主题编辑器里面找到，也可以自己定义主题。如果主题保存为 JSON 文件，那么可以自行加载和注册（参考文档）。 动态修改主题方法如下： ECharts主题样式 利用主题实现，默认有二种，也可自定义主题，或者利用官网提供的主题工具实现 调色板，修改默认的样式颜色 直接的样式设置 itemStyle, lineStyle, areaStyle, label等 高亮的样式：emphasis> 参考文档 // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, series: [{ name: '销量', type: 'pie', data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 274, name: '联盟广告'}, {value: 235, name: '视频广告'}, {value: 400, name: '搜索引擎'} ].sort(function (a, b) { return a.value - b.value; }) }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); //动态切换主题 function setLigth() { myChart.dispose(); myChart = echarts.init(document.getElementById('main'), 'light'); myChart.setOption(option); } function setDark() { myChart.dispose(); myChart = echarts.init(document.getElementById('main'), 'dark'); myChart.setOption(option); } //设置调色板样色 function setColor() { let rcolor = []; for (let i = 0; i < 10; ++i) { //随机一个样色 rcolor.push("#"+Math.round(Math.random()*0x1000000).toString(16)); } let tmpoption = { color: rcolor }; myChart.setOption(tmpoption); }
|
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |