JS
import * as echarts from '../ec-canvas/echarts.js'
/**
* 组件的初始数据
*/
data: {
// 数据
ec: {
onInit: {}
}
},
/**
* 组件的方法列表
*/
methods: {
/**
* 加载柱状图
*/
loadBar(categories, data){
let that = this
let line = this.selectComponent('#chart-line')
line.init((canvas,width,height,dpr)=>{
const lineChart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // new
})
var lineOperation = {
tooltip: {
show: true,
trigger: 'axis'
},
legend:{
show: false // 不显示图例
},
grid: {
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
interval: 0, // 强制显示所有x轴内容
rotate: 45, // 倾斜度 -90 至 90 默认为0
margin: 12, // 文字距离x轴位置
fontSize: 10 // 文字大小
},
data: categories // x轴名称
},
yAxis: {
x: 'center',
type: 'value',
minInterval: 1, // 禁止y轴出现带小数的数字
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
series: [
{
name: that.data.screenName + '量',
type: 'line',
smooth: true, // 曲线平滑
symbol: 'circle', // 标记的图形(圆形)
symbolSize: 6, // 标记图形的大小
itemStyle: {
color: that.data.themeColor // 折线圆点颜色
},
lineStyle: {
color: that.data.themeColor // 折线线条颜色
},
emphasis: {
focus: 'series'
},
data: data // y轴数据
}
]
}
lineChart.setOption(lineOperation)
return lineChart
})
}
}
HTML
<view class="wi-100x bs-bx pl-30 pr-30 mt-24 mb-24">
<viewclass="wi-100x ht-600 white-bg bdr-32">
<fo-ec-canvas class="wi-100x ht-400" id="chart-line" canvas-id="mychart-line" ec="{{ ec }}"></fo-ec-canvas>
</view>
</view>
在微信小程序中使用 ECharts
https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts
github地址
https://github.com/ecomfe/echarts-for-weixin
Echarts在线定制(把新定制的echarts.min.js替换掉原来的echarts.js)
https://echarts.apache.org/zh/builder.html