echarts 使用讲解

   vue引入

npm install  echarts

网络引入方式

 <script type="text/javascript" src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>

案例：

 let e =  document.getElementById('echarts')//要加入的标签

var myChart = echarts.init(e) 

      window.onresize = myChart.resize //自适应

      var app = {}

      let option = null

 

      option = {

        // type: 'scatter',

        // 普通样式。

        tooltip: {

          trigger: 'axis',

          axisPointer: {

            // 坐标轴指示器，坐标轴触发有效

            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'

          }

        },

        grid: {

          left: '3%',

          right: '4%',

          bottom: '3%',

          containLabel: true

        },

        itemStyle: {

          // 点的颜色。

          color: '#fff'

        },

        // label: {

        //     show: true,

        //     // 标签的文字。

        //     formatter: '219'

        // },

 

        // 高亮样式。

        emphasis: {

          itemStyle: {

            // 高亮时点的颜色。

            color: '#CDAD6D'

          },

          label: {

            show: true

            // 高亮时标签的文字。

            // formatter: this.icon

          }

        },

        xAxis: {

          type: 'category',

          color: 'white',

          data: month,

          //设置轴线的属性

          axisLine: {

            lineStyle: {

              color: '#fff',

              width: 2 //这里是为了突出显示加上的

            }

          }

        },

        yAxis: {

          type: 'value',

          axisLine: {

            lineStyle: {

              color: '#fff',

              width: 2 //这里是为了突出显示加上的

            }

          }

        },

        series: [

          {

            data: amounts,//要渲染的数据

            type: 'line',

            smooth: true

          }

        ]

      }

      if (option && typeof option === 'object') {

        myChart.setOption(option, true)

      }

    }

官网地址：https://www.echartsjs.com/zh/index.html