如图：
image.png
1.echarts 下载
npm install echarts --save
2.main.js引入 echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
3.页面代码：
<template>
<div>
<p id="chart" style="width: 600px;height: 300px;background: #f9f9f9;"></p>
</div>
</template>
<script>
export default {
data () {
return {
}
},
mounted() {
this.$nextTick(() => {
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: true
},
shadowStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0, color: 'rgba(43,255,234,0.1)'
},
{
offset: 1, color: 'rgba(2,207,206,0.2)'
}
],
global: false // 缺省为 false
}
}
},
},
grid: {
top:'5%',
left: '0%',
right: '6%',
bottom: '2%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['12-01','12-02','12-03','12-04','12-05','12-06','12-07','12-08','12-09','12-10',],
axisPointer: {
type: 'shadow'
},
//x轴
axisLine: {
"show":false,
lineStyle:{
color:'#666'
}
},
//刻度线
axisTick:{
"show":false
},
},
yAxis: [
{
type: 'value',
// name: '环保指数',
// min: 0,
max: 250,
//y轴刻度线（-）
axisTick:{ //y轴刻度线
"show":false
},
//y轴
axisLine: {
"show":false
},
//y轴网格线
splitLine: {
// show:false,
lineStyle:{
color:['#EEE']
}
},
axisLabel:{
inside : true,//数值朝内
textStyle: {
color: '#CCCCCC'
}
},
},
{
type: 'value',
// name: '限产比例',
// min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value} %',
inside : true,//数值朝内
textStyle: {
color: '#CCCCCC'
}
},
//y轴刻度线（-）
axisTick:{ //y轴刻度线
"show":false
},
//y轴
axisLine: {
"show":false
},
//y轴网格线
splitLine: {
// show:false,
lineStyle:{
color:['#EEE']
}
},
}
],
series: [
{
name:'环保指数',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
//颜色渐变
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(23,146,134,1)'
}, {
offset: 1,
color: 'rgba(0,114,113,1)'
}]),
}
}
},
{
name:'限产比例',
type:'line',
yAxisIndex: 1,
data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
itemStyle: {
normal: {
color: "#2FFAE6",
lineStyle:{
width: 4,
color:{
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: '#02C1BF' // 0% 处的颜色
}, {
offset: 1, color: '#2FFAE6' // 100% 处的颜色
}],
global: false // 缺省为 false
}
},
}
},
}
]
};
let OptionChart = this.$echarts.init(document.getElementById('chart'));
OptionChart.setOption(option);
})
},
}
</script>
<style scoped>
</style>
直接复制代码可自行修改。
