您现在的位置是:网站首页> 内容页

vue引入echarts图表

  • 摩臣2平台
  • 2019-08-13
  • 189人已阅读
简介一、安装echarts依赖。  npminstallecharts-s二、在入口文件main.js文件里引入echarts。  importechartsfrom"echa

一、安装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>

文章评论

Top