话不多说,直接上代码
引入echarts
import * as echarts from 'echarts';
下面的是方法中的渲染
//获取你渲染的那个div盒子,init
let myChart = echarts.init(document.getElementById("LBChart"));
let option = {
color:['#c2e9ed','#6dc7c7'],//调颜色的
tooltip: {//悬浮提示
trigger: 'axis',
formatter: '分类:{b0} <br/>数量:{c0}<br/>占比:{c2}'
},
grid: {
left: '3%',
bottom: '3%',
containLabel: true
},
xAxis: {
name: '分类',
type: 'category',
axisLabel: {interval:0,rotate:40 },
data: this.tableData.map(o => o.quesName),//data中的横轴
axisTick: {
alignWithLabel: true
}
},
yAxis: {
name: '数量',
type: 'value',
axisLine: { //展示Y轴那根线
show: true,
},
},
series: [
{
data: this.tableData.map(o => o.orderCount),
barWidth: '30%',
type: 'bar', //柱状图
},
{
data: this.tableData.map(o => o.orderCount),
type: 'line', //折线图
},
{
data: this.tableData.map(o => o.orderRateStr),
type: 'line', //为了显示提示中的百分比搞的,但是没显示,刚好我不想让他显示
},
]
}
myChart.setOption(option)