一、先说在原生里怎么使用echarts

<!-- 1.引入echarts文件 -->

  <script src="echarts.min.js"></script>

<!-- 准备容器 -->

  <div style="width: 600px;height:400px;" id="main"></div>

//基于dom,初始化echarts实例

  var myChart = echarts.init(document.getElementById('main'))

//制定图表的配置项和数据

  var option = { }

//使用配置项显示图表

  myChart.setOption(option)

 

二、在vue中使用vue-echarts

// 引入vue-echarts

  import ECharts from 'vue-echarts/components/ECharts.vue'

  import 'echarts/lib/chart/line'

  import 'echarts/lib/component/tooltip'

  Vue.component('chart', ECharts)

//在build/webpack.base.conf.js中修改成如下东西 {

        test: /\.js$/,
        loader: 'babel-loader',
+       include: [
+         resolve('src'),
+         resolve('test'),
+         resolve('node_modules/vue-echarts'),
+         resolve('node_modules/resize-detector')
+       ]
 }
//在.vue文件中使用

  <div class="left-bottom">

    <div class="title">系统访问量</div>

    <chart style="width: 100%;height: 13rem;position: absolute;top: -2%;" :options="line"></chart>

  </div>

  //配置

  line: {

        legend: { // 图例组件颜色配置

          data: [

            {name: '一二三四五六 ', icon: 'circle', textStyle: {color: '#fff'}},

            {name: '一二三四五六  ', icon: 'circle', textStyle: {color: '#fff'}},

            {name: '一二三四五六   ', icon: 'circle', textStyle: {color: '#fff'}},

            {name: '一二三四五六    ', icon: 'circle', textStyle: {color: '#fff'}}

          ]

        },

        grid: { // 网格

          left: '-2.3%',

          right: '1.6%',

          bottom: '10%',

          containLabel: true

        },

        toolbox: {

          feature: {

            saveAsImage: {}

          }

        },

        xAxis: {

          splitLine: { // 保留网格线

            show: true,

            lineStyle: {

              color: '#666'

            }

          },

          splitArea: { // 去除网格区域

            show: false,

            lineStyle: {

              color: '#666'

            }

          },

          type: 'category',

          boundaryGap: false,

          axisLine: { // 坐标轴

            lineStyle: {

              color: '#ccc'

            }

          },

          axisTick: { // 坐标轴刻度设置

            inside: true,

            interval: 0

          },

          axisLabel: {

            interval: 0,

            fontSize: 8

          },

          data: ['12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00',  '20:00', '21:00', '22:00', '23:00', '24:00', '01:00', '02:00', '03:00', '04:00', '05:00', '']

 

        },

        yAxis: {

          min: 1000,

          splitLine: { // 保留网格线

            show: true,

            lineStyle: {

              color: '#666'

            }

          },

          splitArea: { // 去除网格区域

            show: false,

            lineStyle: {

              color: '#666'

            }

          },

          type: 'value',

          axisLabel: {

            interval: '0',

            fontSize: 8.5

          },

          axisLine: {

            lineStyle: {

              color: '#ccc'

            }

          },

          axisTick: {

            inside: true

          },

          data: [1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000]

        },

        series: [

          {

            name: '一二三四五六 ',

            type: 'line',

            stack: '总量',

            symbol: 'circle',

            symbolSize: 7,

            itemStyle: {

              normal: {

                color: '#00ff7e',

                lineStyle: {

                  color: '#00ff7e'

                }

              }

            },

            data: [1700, 1720, 1010, 1340, 900, 2300, 2100, 1500]

          },

          {

            name: '一二三四五六  ',

            type: 'line',

            stack: '总量',

            symbol: 'circle',

            symbolSize: 7,

            itemStyle: {

              normal: {

                color: '#0060ff',

                lineStyle: {

                  color: '#0060ff'

                }

              }

            },

            data: [1200, 1820, 1910, 2304, 2090, 3040, 3010, 3000]

          },

          {

            name: '一二三四五六   ',

            type: 'line',

            stack: '总量',

            symbol: 'circle',

            symbolSize: 7,

            itemStyle: {

              normal: {

                color: '#00ccff',

                lineStyle: {

                  color: '#00ccff'

                }

              }

            },

            data: [1500, 2320, 2010, 1054, 1900, 3300, 3100, 3500]

          },

          {

            name: '一二三四五六    ',

            type: 'line',

            stack: '总量',

            symbol: 'circle',

            symbolSize: 7,

            itemStyle: {

              normal: {

                color: '#ffae00',

                lineStyle: {

                  color: '#ffae00'

                }

              }

            },

            data: [1200, 3320, 301, 3304, 3900, 330, 3200, 3050]

          }

        ]

      }

 

 

 

line2: {

legend: { // 图例组件颜色配置

data: [

{name: '一二三四五六 ', icon: 'circle', textStyle: {color: '#fff'}},

{name: '一二三四五六 ', icon: 'circle', textStyle: {color: '#fff'}},

{name: '一二三四五六 ', icon: 'circle', textStyle: {color: '#fff'}},

{name: '一二三四五六 ', icon: 'circle', textStyle: {color: '#fff'}}

]

},

grid: { // 网格

left: '-2.3%',

right: '1.6%',

bottom: '10%',

containLabel: true

},

toolbox: {

feature: {

saveAsImage: {}

}

},

xAxis: {

splitLine: { // 保留网格线

show: true,

lineStyle: {

color: '#666'

}

},

splitArea: { // 去除网格区域

show: false,

lineStyle: {

color: '#666'

}

},

type: 'category',

boundaryGap: false,

axisLine: { // 坐标轴

lineStyle: {

color: '#ccc'

}

},

axisTick: { // 坐标轴刻度设置

inside: true,

interval: 0

},

axisLabel: {

interval: 0,

fontSize: 8

},

data: ['12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00', '01:00', '02:00', '03:00', '04:00', '05:00', '']

},

yAxis: {

min: 1000,

splitLine: { // 保留网格线

show: true,

lineStyle: {

color: '#666'

}

},

splitArea: { // 去除网格区域

show: false,

lineStyle: {

color: '#666'

}

},

type: 'value',

axisLabel: {

interval: '0',

fontSize: 8.5

},

axisLine: {

lineStyle: {

color: '#ccc'

}

},

axisTick: {

inside: true

},

data: [1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000]

},

series: [

{

name: '一二三四五六 ',

type: 'line',

stack: '总量',

symbol: 'none',

itemStyle: {

normal: {

color: 'rgba(0, 254, 116, 0.3)',

lineStyle: {

color: '#00ff7e'

}

}

},

areaStyle: {normal: {}},

data: [1700, 1720, 1010, 1340, 900, 2300, 2100, 1500, 1100]

},

{

name: '一二三四五六 ',

type: 'line',

stack: '总量',

symbol: 'none',

itemStyle: {

normal: {

color: 'rgba(0, 109, 255, 0.3)',

lineStyle: {

color: '#0060ff'

}

}

},

areaStyle: {normal: {}},

data: [1200, 1820, 1910, 2304, 2090, 3040, 3010, 3000, 1500]

},

{

name: '一二三四五六 ',

type: 'line',

stack: '总量',

symbol: 'none',

itemStyle: {

normal: {

color: 'rgba(0, 204, 255, 0.3)',

lineStyle: {

color: '#00ccff'

}

}

},

areaStyle: {normal: {}},

data: [1500, 2320, 2010, 1054, 1900, 3300, 3100, 3500, 2000]

},

{

name: '一二三四五六 ',

type: 'line',

stack: '总量',

symbol: 'none',

itemStyle: {

normal: {

color: 'rgba(255, 174, 0, 0.3)',

lineStyle: {

color: '#ffae00'

}

}

},

areaStyle: {normal: {}},

data: [1200, 3320, 1301, 2304, 2900, 3300, 2200, 1050, 2500]

}

]

}

标签: vue

Logo

前往低代码交流专区

更多推荐