echarts里面样式解析

在main.js中添加下面两行代码

main.js

import echarts from 'echarts' 

Vue.prototype.$echarts =  echarts

【注释】：import echarts from 'echarts' 引入echarts后，不能全局使用echarts,

所以通过Vue.prototype 将echarts保存为全局变量。原则上$echarts可以为任意变量名。

新建Echarts.vue文件

在template中添加一个存放echarts 的'div'容器

添加myEcharts()方法，将官方文档中script内容复制到myEcharts()中

修改echarts.init()为this.$echarts.init() [因为上面第二步，将echarts保存到全局变量$echarts中]

//船舶种类分析

var ZhongLie = {

  tooltip: {

 trigger: 'item',

//formatter: '{a} : {c}艘</br>{a1} : {c1}艘', 拥有多条折线时可以鼠标悬浮显示数值添加单位

 //formatter: '{b}：{c}<br/>占比：{d}%',               饼状图设置占比百分之多少

   extraCssText: 'background-color:rgba(0,0,0,0.3);color:#ffffff;'   //设置悬浮窗的样式

formatter: '{a} <br/>{b} : {c}  《可以在这里面添加鼠标悬浮窗的单位》'//图例样式是 两边横杠中间圆点   图例颜色和折线颜色一样

  },

  legend: {             //设置图例

    top: -3,

    left: 70,

    bottom: 50,

itemGap: 8, // 将图例项之间的间距减小到8像素

    selectedMode:false,//取消点击图例折线消失现象

    itemHeight: 11, //修改图例大小

    itemWidth: 15,

    textStyle: { //图例名字样式

      fontSize: 14,

      color: '#ffffff',

    }},

   // 整体的设置

  grid: {

    top: "50px",

    bottom: "23px",

    left: '32px',

    right: '49px'

  },

  xAxis: {

    name: '日期',           //x轴单位

    splitNumber: 8, //横线个数

    nameTextStyle: { // y轴name的样式调整

      color: '#5EB1ED ',        

      fontSize: 14,

      padding: [0, 0, 0, -10]      // 加上padding可以调整其位置

    },

    type: "category",

    axisTick: {

      alignWithLabel: false,

      lineStyle: {

        width: 0,

      }},

    axisLine: {

      lineStyle: {

        show: true,                                           //是否显示坐标轴轴线，

        color: 'rgb(18, 101, 136)',                           //x轴轴线的颜色

        width: 1,                                                 //x轴粗细

      }},

    axisLabel: {

       showMaxLabel: true,//让x轴最后一个数据显示

      show: true,

      interval: 0,                                             //使x轴文字显示全

      color: "rgb(94, 177, 237)",                                            //更改坐标轴文字颜色

      fontSize: 10                                                   //更改坐标轴文字大小

    },

    data: ["3:00", "6:00", "9:00", "12:00", "15:00", "18:00", "21:00", "24:00"]

  },

  yAxis: {

    name: '(艘数)',

    type: 'value',//y轴去掉小数

    minInterval: 1,//y轴去掉小数

    nameTextStyle: {                                        // y轴name的样式调整

      color: '#5EB1ED ',

      fontSize: 14,

      padding: [0, 0, 0, -25]                       // 加上padding可以调整其位置

    },

    min: 0,                                                       // 刻度最小值

    max: 32,                                                     // 刻度最大值

    splitNumber: 5,                                           //横线个数

    interval: 8,                                             //每个刻度之间相差

    type: "value",

    axisLabel: {

      show: true,

      interval: 0,                                       //使x轴文字显示全

      color: "#5EB1ED",                         //更改坐标轴文字颜色

      fontSize: 12,                                 //更改坐标轴文字大小

      formatter: function (value) {                 //去掉千位分隔符

        return value + "";

      } },

 //   formatter: function (value) {                    //  y轴标签保留几位小数      

    // return value.toFixed(1);     

   //}

    splitLine: {             //修改背景线条样式

      show: true,                                                  //是否展示

      lineStyle: {

        color: "rgb(18, 101, 136)",                                    //线条颜色

        type: "dashed"                                            //线条样式，默认是实现，dashed是虚线

      }

    },

    // max: function (value) {

    //   return value.max + 20;

    // }

    // max: 32,                                                        //最大值

  // min:0,                                                       //最小值

  },

  series: [                    // lineStyle: {    //   type: 'dotted' //'dotted'虚线 'solid'实线    // }

    {

      name: '预警',

 //   center: ['35%', '58%'], // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置

      data: [27, 27, 27, 27, 27, 27, 27, 27],

      type: "line",                                                      //折线    bar柱状图

      symbol: "none",                                       //去除折线上的小圆点

        symbolSize: 8,                                   //折线圆点的大小

        symbol: 'circle',                              //设定为实心点

      label: {

        show: false,                                     // 在折线拐点上显示数据

        fontFamily: "Microsoft YaHei",            //显示数据的字体样式

        fontSize: 12,

        color: "orange"                                   

      },

      itemStyle: {

        normal: {                             //新版本的echarts      normal可以删掉

          color: 'red', //改变折线颜色

          lineStyle: {

            type: 'dotted' //'dotted'虚线 'solid'实线

          }} },},]}

标签中文本内容太长
echarts

axisLabel: {    

 interval: 0,//如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推.    

 rotate: '45',// 刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠.   }, };

设置渐变

 series: [{

    data: [29600, 32100, 32500, 34000, 38000, 41000, 45000],

    type: 'bar',

    // emphasis: {       //折线有两条时，鼠标悬浮在一条折线上时另一条折线悬浮

   //   focus: 'series'      // },

    barWidth: 20, //柱图宽度

    itemStyle: { //渐变   柱状图用itemStyle   折线图用areaStyle

      color: {

        x: 0,

        y: 0,

        x2: 0,

        y2: 1,

        colorStops: [{

            offset: 0,

            color: '#048096' // 0% 处的颜色 }, {

            offset: 1,

            color: '#072C43' // 0% 处的颜色

          },],

        globalCoord: false // 缺省为 false

      }}}]};

tooltip: {                    //设置鼠标悬浮显示柱状图，折线图的具体信息

    trigger: 'item',

  extraCssText: 'background-color:rgba(0,0,0,0.3);color:#ffffff;',//设置鼠标悬浮在柱状图显示数据基本信息

    formatter: '{a} <br/>{b} : {c}'         //'{a} <br/>{b} : {c}'

  },

使饼图的数据显示到各自区域内

 label: {            //使饼图的数据显示到各自区域内

      show: true,

      position: 'inner',

    //formatter: '{b}：{c}<br/>占比：{d}%',  饼状图设置鼠标悬浮显示占比百分之多少

      formatter:'{d}',

       color: '#FFF5F5',      //显示字体的颜色

    },

设置划入提示框

  // 滑入提示窗

  tooltip: {

    show: true,

    trigger: 'axis',

    backgroundColor: "rgba(0,0,0,.3)",

    textStyle: {

      color: "#fff"

    },

  valueFormatter: (value) => value + '艘'         //添加单位

},