实现效果:
index.json文件:
{
"component": true,
"usingComponents": {
"ec-canvas":"../../components/ec-canvas/ec-canvas"
}
}
index.wxss 文件:
<view class="pie-charts">
<view class="lengendTitle">
<image src="{{tipImg}}" class="tipLineImg" />
<text class="tipTitle">时/分</text>
</view>
<ec-canvas
id="mychart-dom-bar"
canvas-id="mychart-bar"
ec="{{ ec }}"
></ec-canvas>
</view>
inex.js 文件配置:
import * as echarts from '../ec-canvas/echarts';
function initChart(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
grid: {
show: false,
top: '9%',
right: '5%',
left: '10%'
},
xAxis: {
type: 'category',
axisLine: {
show: true,
lineStyle: {
type: "dashed"
}
},
data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14']
},
yAxis: {
type: 'value',
splitLine: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
type: "dashed"
}
}
},
series: [{
data: [0, 40, 10, 40, 25, 60, 40, 10, 60, 25, 0, 40, 10, 40, 25],
type: 'line',
smooth: true,
itemStyle: {
normal: {
color: '#ffb71b',
lineStyle: { // 系列级个性化折线样式
width: 4,
type: 'solid',
color: new echarts.graphic.LinearGradient(0, 0.4, 0.7, 1, [{
offset: 0,
color: '#ffb71b'
} , {
offset: 0.4,
color: '#b75cee'
}, {
offset: 0.7,
color: '#66acfc'
}, {
offset: 1,
color: '#3843fa'
}]),//线条渐变色
}
},
}
}]
};
chart.setOption(option);
return chart;
}
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
ec: {
onInit: initChart
},
tipImg: '../../img/lineTip.png'
},
index.wxss文件:
.pie-charts {
width: 100%;
height: 500rpx;
margin: 20px 0 0 10px;
}
.lengendTitle {
display: flex;
align-items: center;
justify-content: center;
padding-top: 20rpx;
}
.tipTitle {
font-size: 28rpx;
color: #ffffff;
margin-left: 10rpx;
letter-spacing: 5rpx;
}
.tipLineImg {
width: 20rpx;
height: 20rpx;
padding-top: 7rpx;
}