乘风原创程序

  • vue使用echarts实现折线图
  • 2022/3/21 12:45:44
  • 本文实例为大家分享了vue使用echarts实现折线图的具体代码,供大家参考,具体内容如下

    效果图:

    代码:

    <template>
    ? ? ? ? ? ? <div class="procharts" ref='charts'>
    ? ? ? ? ? ? </div>
    </template>
    
    <script>
    import echarts from 'echarts' ? //npm install echarts@4.9.0
    export default {
    ? ? data () {
    ? ? ? ? return {
    ? ? ? ? ? ? option:{
    ? ? ? ? ? ? ? ? ? ? color:['rgb(8,252,7)','rgb(255,168,0)',],
    ? ? ? ? ? ? ? ? ? ? title: {
    ? ? ? ? ? ? ? ? ? ? ? ? text: ''
    ? ? ? ? ? ? ? ? ? ? },
    ? ? ? ? ? ? ? ? ? ? tooltip: { //提示框
    ? ? ? ? ? ? ? ? ? ? ? ? trigger: 'axis',
    ? ? ? ? ? ? ? ? ? ? },
    ? ? ? ? ? ? ? ? ? ? legend: {//图例的类型
    ? ? ? ? ? ? ? ? ? ? ? ? icon:'roundrect',//图例icon图标
    ? ? ? ? ? ? ? ? ? ? ? ? data: [
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? {
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? name:"上年",
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? textstyle: {
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color: '#fff'
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? },{
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? name:"本年",
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? textstyle: {
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color: '#fff'
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? },
    ? ? ? ? ? ? ? ? ? ? ? ? ],
    ? ? ? ? ? ? ? ? ? ? ? ??
    ? ? ? ? ? ? ? ? ? ? },
    ? ? ? ? ? ? ? ? ? ? grid: {
    ? ? ? ? ? ? ? ? ? ? ? ? left: '3%',
    ? ? ? ? ? ? ? ? ? ? ? ? right: '4%',
    ? ? ? ? ? ? ? ? ? ? ? ? bottom: '3%',
    ? ? ? ? ? ? ? ? ? ? ? ? top:'17%',
    ? ? ? ? ? ? ? ? ? ? ? ? containlabel: true //grid区域是否包含坐标轴的刻度标签
    ? ? ? ? ? ? ? ? ? ? },
    ? ? ? ? ? ? ? ? ? ? xaxis: {
    ? ? ? ? ? ? ? ? ? ? ? ? type: 'category', //坐标轴类型。
    ? ? ? ? ? ? ? ? ? ? ? ? boundarygap: false, //坐标轴两边留白策略
    ? ? ? ? ? ? ? ? ? ? ? ? data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月'],
    ? ? ? ? ? ? ? ? ? ? ? ? axislabel: {//坐标轴刻度标签的相关设置
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? interval:0,
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? textstyle: {
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? color: '#fff',
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? fontsize :10
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? },
    ? ? ? ? ? ? ? ? ? ? ? ? },
    ? ? ? ? ? ? ? ? ? ? ? ? axisline:{//坐标轴轴线相关设置
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? show :true,
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? linestyle:{
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color:'rgb(2,121,253)'
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
    ? ? ? ? ? ? ? ? ? ? ? ? },
    ? ? ? ? ? ? ? ? ? ? ? ? axistick:{ //坐标轴刻度相关设置。
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? show :false,
    ? ? ? ? ? ? ? ? ? ? ? ? }
    ? ? ? ? ? ? ? ? ? ? },
    ? ? ? ? ? ? ? ? ? ? yaxis: {
    ? ? ? ? ? ? ? ? ? ? ? ? type: 'value',
    ? ? ? ? ? ? ? ? ? ? ? ? axislabel: { //x轴的坐标文字
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? show: true,
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? textstyle: {
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color: '#fff' //文字的颜色
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? },
    ? ? ? ? ? ? ? ? ? ? ? ? ? ??
    ? ? ? ? ? ? ? ? ? ? ? ? },
    ? ? ? ? ? ? ? ? ? ? ? ? max:100,//最大值100
    ? ? ? ? ? ? ? ? ? ? ? ? axisline:{//坐标轴轴线相关设置
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? show :true,
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? linestyle:{
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color:'rgb(2,121,253)'
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
    ? ? ? ? ? ? ? ? ? ? ? ? },
    ? ? ? ? ? ? ? ? ? ? ? ? axistick:{ //坐标轴刻度相关设置。
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? show :false,
    ? ? ? ? ? ? ? ? ? ? ? ? },
    ? ? ? ? ? ? ? ? ? ? ? ? splitline:{ ?//坐标在grid区域的分割线
    ? ? ? ? ? ? ? ? ? ? ? ?  ?linestyle: { //设置分割线的样式(图表横线颜色)
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color: ['#153a8a']
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
    ? ? ? ? ? ? ? ? ? ? ? ? }
    ? ? ? ? ? ? ? ? ? ? },
    ? ? ? ? ? ? ? ? ? ? series: [
    ? ? ? ? ? ? ? ? ? ? ? ? {
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? name: '上年',
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? type: 'line',
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? data: [10,20,30,50,50,10,50,60,10,50,10,30],
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? linestyle:{
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color:'rgb(8,252,7)' ?//线的颜色
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
    ? ? ? ? ? ? ? ? ? ? ? ? },
    ? ? ? ? ? ? ? ? ? ? ? ? {
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? name: '本年',
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? type: 'line',
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? data: [20,20,30,50,50,10,50,20,30,50,50,30],
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? linestyle:{
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color:'rgb(255,168,0)' //线的颜色
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
    ? ? ? ? ? ? ? ? ? ? ? ? }
    ? ? ? ? ? ? ? ? ? ? ]
    ? ? ? ? ? ? ? ? }
    ? ? ? ? }
    ? ? },
    ? ? created () {
    ? ? ? ??
    ? ? },
    ? ? mounted () {
    ? ? ? ? this.mycharts()
    ? ? },
    ? ? methods: {
    ? ? ? ? mycharts(){
    ? ? ? ? ? ? let mychart =echarts.init(this.$refs.charts,"macarons");
    ? ? ? ? ? ? mychart.setoption(this.option)
    ? ? ? ? ? ? //图表自适应
    ? ? ? ? ? ? window.addeventlistener("resize",function(){
    ? ? ? ? ? ? ? ? mychart.resize() ?// mychart 是实例对象
    ? ? ? ? ? ? })
    ? ? ? ? }
    ? ? }
    }
    </script>
    
    <style scoped>
    .procharts{
    ? ? width: 100%;
    ? ? height: 400px;
    ? ? background: rgb(14, 51, 129);
    }
    </style>