vue引入echarts图表
一、安装echarts依赖。
npm install echarts -s
二、在入口文件main.js文件里引入echarts。
import echarts from “echarts”
vue.prototype.$echarts = echarts
三、在所需页面按需引入图标表
<template>
<div id=”mycharts” :style=”{width:100%,height:100%}”></div>
</template>
<script>
export default {
name: “hello”,
data() {
return {
};
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
let myChart = this.$echarts.init(document.getElementById(“myChart”)); // 初始化echarts实例
myChart.setOption({ // 绘制图表
title: {
text: “2018.2.26-2018.3.11 LNG价格K线图（元/吨）”, //图标标题
subtext: ‘纯属虚构’
textStyle: { //图表标题文字样式
fontWeight: “normal”,
color: “#fff”, //标题颜色
fontSize: 14
},
x: “center”, //标题居中显示
top:13 //标题与顶部的距离
},
tooltip: { //浮态框
show: true,
trigger: “axis”,
backgroundColor: ‘rgba(25,159,170,0.5)’, //背景颜色
borderRadius: 8, //边框圆角
padding: 10, // 内边距
// axisLabel: {
// formatter: ‘{c0}’
// }
},
legend: {
itemGap: 50,
itemWidth: 20, // 图例图形宽度
itemHeight: 6,
data: [“本项目工厂价”, “全国均价”],
textStyle: { //图例样式
fontSize: 12,
color: “#F1F1F3”
},
bottom: 10
},
calculable: true,
xAxis: { //X轴
type: “category”,
boundaryGap: false,
data: [“02/26″,”02/27″,”02/28″,”03/01″,”03/02″,”03/03″,”03/04″,”03/05″,”03/06″,”03/07″,”03/08″,”03/09″,”03/10″,”03/11”],
axisTick: {
show: false //是否显示坐标轴刻度
},
/*设置X轴字体样式*/
axisLabel: {
show: true,
interval: 0,
textStyle: {
color: “#fff”,
fontSize: 10,
fontFamily: “微软雅黑”
}
},
axisLine: {
lineStyle: {
color: “#fff”,
width: 0.5,
type:’solid’
}
}
},
yAxis: { //Y轴
type: “value”,
min: 1000,
max: 12000,
splitNumber: 7,
axisTick: {
show: false //是否显示坐标轴刻度
},
splitLine: {
lineStyle: {
type: “dotted”,
}
},
axisLine: {
lineStyle: {
color: “#fff”,
width: 0.5
}
},
axisLabel: {
show: true,
formatter: “{value}”,
textStyle: {
color: “#fff”,
fontSize: 10,
fontFamily: “微软雅黑”
}
}
},
series: [
{
name: “本项目工厂价”,
type: “line”,
symbolSize: 3, //拐点圆的大小
color: [“#F4C43A”], //折线条的颜色
smooth: false, //关键点，为true是不支持虚线的，实线就用true
itemStyle: {
normal: {
color: “#F4C43A”, //图标颜色
borderColor: “#fff”,
lineStyle: {
normal: {
width: 1,
type: “solid”, //’dotted’虚线 ‘solid’实线
color: “#F4C43A” //折线的样式
}
}
}
},
hoverAnimation: false,
data: [7000,7000,7000,7000,6800,5800,5000,4800,4800,4800,5000,5000,5000,5000]
},
{
name: “全国均价”,
type: “line”,
symbolSize: 3, //拐点圆的大小
color: [“#182987”], //折线条的颜色
smooth: false, //关键点，为true是不支持虚线的，
itemStyle: {
normal: {
color: “#182987”, //图标颜色
borderColor: “#fff”,
lineStyle: {
normal: {
width: 1,
type: “solid”, //’dotted’虚线 ‘solid’实线
color: “#182987” //折线的样式
}
}
}
},
hoverAnimation: false,
data: [5800,5800,5800,5800,5000,4600,4600,3600,3000,3000,3000,3800,3800,3800]
}
]
});
}
}
};
</script>
版权声明：本文为Zg-blog原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。