此代码用于vue项目中
1.template

<template>
    <div id="Chart">
    </div>
</template>

2.script

data（）{
return{
 myChart: null,
}},
mounted(){
 this.Chart()
},
methods:{
Chart(){
        this.myChart = echarts.init(document.getElementById('Chart')); //第一个参数为装图表的容器，第二个参数为图表主体颜色
        this.myChart.setOption({
          grid: {
            left: '3%',
            right: '4%',
            bottom: '20px',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: [112, 332, 43, 23, 342, 234, 21, 34, 35, 666, 666, 342, 234, 342, 424, 231, 67, 345, 897, 45, 899,
              65, 23, 123, 567, 787
            ],
            axisTick: {
              show: false, //是否显示刻度
            },
            // y轴的颜色和宽度
            axisLine: {
              show: false, //是否显示x轴
              lineStyle: {
                color: '#000', // y坐标轴的轴线颜色
                width: 1, //这里是坐标轴的宽度,可以去掉
              }
            },
            // 控制网格线是否显示
            splitLine: {
              show: false, // 网格线是否显示
              //  改变样式
              lineStyle: {
                color: '#ccc' // 修改网格线颜色
              }
            },
          },
          yAxis: {
            type: 'value', //type确定该轴为值轴或者类目轴 type 可以为value或者category
            //坐标轴刻度相关设置
            axisTick: {
              show: false, //是否显示刻度
            },
            // y轴的字体样式
            axisLabel: {
              show: true, //这行代码控制着坐标轴y轴的文字是否显示
              textStyle: {
                color: '#333333FF', //y轴上的字体颜色
                fontSize: '16' // y轴字体大小
              }
            },
            // 控制网格线是否显示
            splitLine: {
              show: true, // 网格线是否显示
              //  改变样式
              lineStyle: {
                color: '#C6C6C6FF', // 修改网格线颜色
                type: 'dashed', //网格线的类型
                width: 1,
              }
            },
            // y轴的颜色和宽度
            axisLine: {
              show: false, //是否显示y轴
              lineStyle: {
                color: '#000', // y坐标轴的轴线颜色
                width: 1, //这里是坐标轴的宽度,可以去掉
              }
            }
          },
          series: [{ //设置图表的类型
            type: 'bar', //决定图表的形状（折线、柱状、饼图。。。）这里我选择了曲线
            // stack: '总量',
            symbol: 'circle', // 拐点标记的图形
            symbolSize: 10, //拐点的大小
            smooth: true, // 是否是平滑曲线
            lineStyle: {
              color: 'linear-gradient(180deg,rgba(172,146,243,1) 0%,rgba(89,100,228,1) 100%)' // 线条的颜色

            },
            itemStyle: { //拐点标记的样式
              normal: {
                color: '#5964E4FF', // 拐点的颜色
                // borderColor: 'rgba(255,255,255,1)',
                barBorderRadius: 8,
                //在柱状图上方显示数值
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  formatter: function (params, ticket) {
                    // return Math.round(params.value / dataNum[params.name] * 1000) / 10 + "%";
                    // console.log(ticket)
                  },
                  textStyle: { //数值样式
                    color: 'black',
                    fontSize: 16
                  }
                }
              }

            },
            hoverAnimation: false, //是否开启 hover 在拐点标志上的提示动画效果
            emphasis: { //拐点高亮的样式
              //   show: false,
              itemStyle: {
                color: '#5964E4FF'
              }
            },
            data: [820, 32, 391, 94, 190, 600, 120, 30, 69, 566, 12, 342, 45, 667, 88, 890, 123, 143, 233, 345,
              567, 123, 21, 32, 12, 901
            ],
          }],
          tooltip: { //提示框组件
            show: false,
          },
        });
}
}

3.style

   #Chart {
      width: 100%;
      height: 580px;
    }