uni-app 使用web的echarts画图表

initEcharts: function() {let data = {xAxis: [0, 1, 2, 3, 4, 5],data: [25, 35, 47, 33, 142, 29],}this.chart2 = this.load_echart(this.setChartBar(data), 'canvasLine');},load_echart: function(options, id) {let myChartif (id && options) {myChart = echarts.init(document.getElementById(id));myChart.setOption(options, true)}return myChart},// echart的属性设置setChartBar: function(data) {let option = {color: this.echartColor,tooltip: {},legend: {name: '电价曲线',position: 'left'},xAxis: {data: data.xAxis,splitArea: { // 网格区域show: false // 是否显示，默认为false},splitLine: { // gird 区域中的分割线show: false, // 是否显示},axisTick: {show: false},axisLine: {show: true,lineStyle: {color: '#ccc'},},axisLabel: { // 坐标轴的标签show: true, // 是否显示inside: false, // 是否朝内rotate: 0, // 旋转角度margin: 8, // 刻度标签与轴线之间的距离color: '#999', // 默认轴线的颜色textStyle: {color: '#999'},},},yAxis: [{type: 'value',show: true, // 是否显示position: 'left', // y轴位置offset: 0, // y轴相对于默认位置的偏移type: 'value', // 轴类型，默认为 ‘category’name: '(元/kWh)', // 轴名称nameLocation: 'end', // 轴名称相对位置valuenameTextStyle: { // 坐标轴名称样式color: '#ccc',padding: [0, 0, 0, 0] // 坐标轴名称相对位置},splitArea: { // 网格区域show: false // 是否显示，默认为false},splitLine: { // gird 区域中的分割线show: false, // 是否显示},axisTick: {show: false},axisLine: {show: true,lineStyle: {color: '#ccc'},},axisLabel: { // 坐标轴的标签show: true, // 是否显示inside: false, // 是否朝内rotate: 0, // 旋转角度margin: 8, // 刻度标签与轴线之间的距离color: '#999', // 默认轴线的颜色textStyle: {color: '#999'},},}],grid: [{x: '8%',y: '16%',width: '80%',height: '68%'}, ],series: [{name: '电价曲线',type: 'line',data: data.data,smooth: false,symbol: 'none',color: '#4040ff'// yAxisIndex: 1}, ]}return option},

mounted() {if (typeof window.echarts === 'function') {this.initEcharts()} else {// 动态引入较大类库避免影响页面展示const script = document.createElement('script')// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算script.src = 'static/js/echart/echarts.js'script.onload = this.initEcharts.bind(this)document.head.appendChild(script)}this.mGetDate();},

注意

只兼容h5和app，其他小程序不建议使用。详细介绍见官网

<script module="echarts" lang="renderjs">
//上面的代码块写在这里
</script>

<view class="class-style" id="id"></view>//同web端一样，需要设置宽高

uni-app 使用web的echarts画图表相关推荐

使用echarts画图表
项目需要在网页上画图表,在网上找了一下,发现百度出品的echarts非常好用.echarts把看似复杂的图表进行了分解,使用结构化的模型来完成图表的配置.画图表就跟写CSS一样,实际上echarts使 ...
vue 用echarts画图表
创建vue项目打开cmd 输入: cd到项目目录安装element ui 和 echarts 在项目中引入element ui 和 echarts 在chart/src/main.js文件中输入 ...
uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
python饼状图颜色一样_使用echarts画饼状图，设置饼状图颜色
前言: 前面已经跟大家分享了使用echarts画柱状图.折线图,一些之前自己遇到的坑也跟大家说了,这次就不再赘述.官方有配置文档,很详细,大家不懂的地方也可以交流. 今日分享重点:画饼状图. 1.引入 ...
Vue+Vuex+Axios+ECharts 画一个动态更新的中国地图
一.生成项目及安装插件 # 安装 Vue Cli npm install vue-cli -g# 初始化项目 vue init webpack vue-china-map# 切到目录下 cd vue- ...
JS实现Echarts的图表保存为图片功能
文章目录需求分析开发准备实现思路效果图参考链接需求分析实际项目开发过程中经常会有图表展示功能,同时为了满足用户需要,会附带着图表导出功能,主要形式就是保存为图片.在Echarts中本身就 ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
[Phonegap+Sencha Touch] 移动开发77 Cordova Hot Code Push插件实现自己主动更新App的Web内容...
原文地址:http://blog.csdn.net/lovelyelfpop/article/details/50848524 插件地址:https://github.com/nordnet/cord ...
echarts画中国地图！
今天,我们迎来了冬至节气,大家今天吃了什么呀?我想着今天冬至,应该吃一碗饺子,于是去了一家饺子馆,到了那里人惊呆了,真的太多人了!!我随手拍了一张,氛围十分不错,有过年的味道了. 上图为武汉某饺子馆冬 ...

uni-app 使用web的echarts画图表

uni-app 使用web的echarts画图表

uni-app 使用web的echarts画图表相关推荐

最新文章

热门文章