电脑网站拒绝连接怎么解决,泗门网站建设,哪里可以兼职答题,医疗电子网站建设第一步#xff1a;引入echarts文件--此文件需要下载#xff1a; 下载地址#xff1a;点击此处进行下载echarts文件 点击Download ZIP下载压缩包#xff0c;注意#xff1a;e-canvas是我从完整的文件中剥离出来的有用的#xff0c;不会影响项目。
第二步#xff1a;把整…第一步引入echarts文件--此文件需要下载 下载地址点击此处进行下载echarts文件 点击Download ZIP下载压缩包注意e-canvas是我从完整的文件中剥离出来的有用的不会影响项目。
第二步把整个文件放入到小程序文件里。 第三步在需要的组件中进行正确引入 在需要使用echarts的组件的js文件里需要引入
。
第四步案例实现 4-1在index.js中
import * as echarts from ../../ec-canvas/echarts;function initChart(canvas, width, height, dpr) {const chart echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr // new});canvas.setChart(chart);var option {label: {normal: {show: true}},grid: {containLabel: true,x: 10, //左y: 40, //上x2: 10, //右y2: 10, //下borderWidth: 1,},legend:{icon:square,data:[室内温度,室外温度],right:10,itemWidth: 15,//图标宽itemHeight: 15,//图标高itemGap: 13,//间距textStyle:{color:#9FA0A3,fontSize: 12,},},tooltip: {trigger: axis,backgroundColor: rgba(255, 255, 255, 0.8),},xAxis: {type: category,boundaryGap: false,data: [10:00, 10:15, 10:30, 10:45, 11:00],// show: false},yAxis: {type: value,min: 0,max: 60,interval: 15,axisLabel: {formatter: {value}},splitLine: {lineStyle: {type: dashed,color:#9FA0A3}}// show: false},series: [{name: 室内温度,type: line,smooth: true,data: [15, 16, 15, 17, 15, 16, 17],itemStyle:{normal:{color:#12A0FF}}}, {name: 室外温度,type: line,smooth: true,data: [30, 20, 30, 35, 30, 25, 38],itemStyle:{normal:{color:#D83D6C}}}, ]};chart.setOption(option);return chart;
}Page({data: {ec: {onInit: initChart,},})
4.2:在index.wxml中
view
ec-canvas idmychart-dom-line canvas-idmychart-line ec{{ ec }}/ec-canvas
/view
最后结果
