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>