echarts图表格式记录

最新推荐文章于 2022-12-08 15:09:02 发布
最新推荐文章于 2022-12-08 15:09:02 发布
阅读量8.1k 收藏
点赞数
分类专栏： 记录 文章标签： echarts 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fanxiang123/article/details/125007245
版权

单柱图/单条形图

chartData: {
    axisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    seriesData: [120, 200, 150, 80, 70, 110, 130]
}

单柱图+标线

chartData: {
    axisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    seriesData: [120, 200, 150, 80, 70, 110, 130],
    // 标线数据
    markData: [
        { address: '省', value: 125 },
        { address: '市', value: 100 },
        { address: '县', value: 80 }
    ]
}

在这里插入图片描述

多柱图/多条形图

chartData: {
    axisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    seriesData: [
        {
            name: '指标1',
            dataList: [120, 130, 234, 245, 2444, 123]
        },
        {
            name: '指标2',
            dataList: [120, 130, 234, 245, 2444, 123]
        },
        {
            name: '指标3',
            dataList: [120, 130, 234, 245, 2444, 123]
        },
        {
            name: '指标4',
            dataList: [120, 130, 234, 245, 2444, 123]
        }
    ]
}

在这里插入图片描述

堆叠柱状图/堆砌柱状图

注意：x轴上数据为正，x轴下数据为负

chartData: {
    axisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    seriesData: [
        {
            name: '指标1',
            dataList: [120, 130, 234, 245, 2444, 123]
        },
        {
            name: '指标2',
            dataList: [120, 130, 234, 245, 2444, 123]
        },
        {
            name: '指标3',
            dataList: [120, 130, 234, 245, 2444, 123]
        },
        {
            name: '指标4',
            dataList: [120, 130, 234, 245, 2444, 123]
        }
    ]
}

在这里插入图片描述

折线图（单线图）

chartData: {
    axisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    seriesData: [120, 200, 150, 80, 70, 110, 130]
}

多折线图

chartData: {
    axisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    seriesData: [
        {
            name: '指标1',
            dataList: [123, 131, 224, 123, 567, 342]
        },
        {
            name: '指标2',
            dataList: [234, 145, 234, 245, 232, 123]
        },
        {
            name: '指标3',
            dataList: [12, 231, 234, 245, 244, 123]
        },
        {
            name: '指标4',
            dataList: [43, 456, 234, 245, 250, 123]
        }
    ]
}

在这里插入图片描述

单柱+单折

注意：需要明确那部分数据是柱状图展示所需数据，哪些数据是折线图的数据

chartData: {
    axisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    seriesLineData: {
        name: '指标1',
        value: [120, 130, 234, 245, 2444, 123]
    },
    seriesBarData: {
        name: '指标2',
        value: [150, 230, 224, 218, 135, 147]
    }
}

单柱+单折显示上升下降趋势

var up = 'image://data:image/png;base64,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'
var down = 'image://data:image/png;base64,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'
var same = 'image://data:image/png;base64,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'

var chartData = {
  axisData: ['第一季度', '第二季度', '第三季度', '第四季度'],
  seriesBarData: {
    name: '有形资产净增率',
    dataList: [242.97, 234.31, 239.065, 236.27]
  },
  seriesLineData: {
    name: '有形资产净增率',
    dataList: [2.83, -3.56, 0.65, -2.49]
  }
}
option = {
  xAxis: {
    type: 'category',
    data: chartData.axisData
  },
  yAxis: {
      type: 'value',
    },
  tooltip: {
    formatter: (params) => {
      console.log(params)
      return '数值：' + chartData.seriesBarData.dataList[params.dataIndex] + 
      '\n增幅：' + chartData.seriesLineData.dataList[params.dataIndex]
    }
  },
  series: [
    {
      name: '',
      type: 'pictorialBar',
      symbol: function (data, params) {
        if (chartData.seriesLineData.dataList[params.dataIndex] > 0) {
          return up
        } else if (chartData.seriesLineData.dataList[params.dataIndex] < 0) {
          return down
        } else if (chartData.seriesLineData.dataList[params.dataIndex] == 0) {
          return same
        }
      },
      symbolSize: [20, 30],
      symbolOffset: [0, -40],
      symbolPosition: 'end',
      label: {
        show: true,
        position: 'top',
        formatter: function (params) {
          return chartData.seriesLineData.dataList[params.dataIndex] + '%'
        },
        fontSize: 18
      },
      data: chartData.seriesBarData.dataList
    },
    {
      type: 'bar',
      data: chartData.seriesBarData.dataList,
      barWidth: this.barWidth
    }
  ]
};

单饼图/单环图

chartData: [
    { value: 1048, name: 'Search Engine' },
    { value: 735, name: 'Direct' },
    { value: 580, name: 'Email' },
    { value: 484, name: 'Union Ads' },
    { value: 300, name: 'Video Ads' }
]

双环图

chartData: [
    {
        name: '税额',
        seriesData: [
            { value: 1048, name: '开发区分局' },
            { value: 735, name: '金港分局' },
            { value: 580, name: '塘桥分局' },
            { value: 484, name: '保税区' },
            { value: 300, name: '锦丰分局' },
            { value: 580, name: '凤凰分局' },
            { value: 484, name: '乐余分局' },
            { value: 300, name: '大新分局' }
        ]
    },
    {
        name: '人数',
        seriesData: [
            { value: 40, name: '开发区分局' },
            { value: 38, name: '金港分局' },
            { value: 32, name: '塘桥分局' },
            { value: 30, name: '保税区' },
            { value: 28, name: '锦丰分局' },
            { value: 26, name: '凤凰分局' },
            { value: 22, name: '乐余分局' },
            { value: 18, name: '大新分局' }
        ]
    }
]

在这里插入图片描述

单柱变动图/单条变动图

传参1

var chartData = {
	timeLindata: ['2018', '2019', '2020', '2021'],
	seriesData: [
		{
			xdata: ['批发零售', '制造业', '商务服务', '居民服务'],
			ydata: [3,4,5,6]
		}, // 2018
		{
			xdata: ['批发零售', '制造业', '商务服务', '居民服务'],
			ydata: [13,24,15,26]
		}, // 2019
		{
			xdata: ['批发零售', '制造业', '商务服务', '居民服务'],
			ydata: [3,4,5,6]
		}, // 2020
		{
			xdata: ['批发零售', '制造业', '商务服务', '居民服务'],
			ydata: [33,24,35,56]
		} // 2021
	]
}
var optionVal = chartData.seriesData.map((item, index) => {
  return {
    title: {
      text: chartData.timeLindata[index] + '年'
    },
    xAxis: {
      data: item.xdata
    },
    series: {
      type: 'bar',
      data: item.ydata
    }
  }
  
})
option = {
  baseOption: {
    timeline: {
      data: chartData.timeLindata,
      axisType: 'category',
      autoPlay: true,
      playInterval: 1500,
    },
    title: {
      text: '',
      right: '2%',
      bottom: '8%',
      textStyle: {
        fontSize: 50,
        color: '#000'
      }
    },
    xAxis: {
      type: 'category'
    },
    yAxis: {
      type: 'value'
    }
  },
  options: optionVal
}

传参2

var chartData = {
	timelineData: ['2016', '2017', '2018', '2019'],
  xData: ['批发零售', '制造业', '商务服务', '居民服务', '建筑业', '住宿餐饮', '科研'],
  yData: [
      [13.2, 1.11, 13.6, 9284, 64138, 2237, 4779], // 2016
      [15.26, 1.31, 16.68, 10331, 91580, 1909, 40469], // 2017
      [14.23, 1.31, 21.13, 10873, 94964, 2966, 129748], // 2018
      [15.68, 1.56, 34.55, 10289, 92345, 1099, 132011] // 2019
   ]
}
var optionVal = chartData.yData.map((item, index) => {
  return {
    title: {
      text: chartData.timelineData[index] + '年'
    },
    xAxis: {
      data: chartData.xData
    },
    series: {
      type: 'bar',
      data: item
    }
  }
})
option = {
  baseOption: {
    timeline: {
      data: chartData.timelineData,
      axisType: 'category',
      autoPlay: true,
      playInterval: 1500,
    },
    title: {
      text: '',
      right: '2%',
      bottom: '8%',
      textStyle: {
        fontSize: 50,
        color: '#000'
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category'
    },
    yAxis: {
      type: 'value'
    }
  },
  options: optionVal
}

在这里插入图片描述

单柱变动图显示上升下降趋势

var up='image://data:image/png;base64,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'    
var down = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+nhxg7wAAAARnQU1BAACxjwv8YQUAAAABc1JHQgCuzhzpAAACslBMVEUAAAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAAAzAD1YVusAAAA5XRSTlMA8XwK+JABXSv1cgJxGNQMbhoUIATiUfNg/sKCFwc8D97qVGgoZ1/uq9A/dPouwzep9FPb8hGXYnjcfxKwy6GxJDG847Y+XKSiSL+e+ejBtUVJ7I+fG60Z1ToIJeH8bG1ljuv70daKypqIHUyHCelrx6cvxtkFFYubRzLl9k1wQKUco887NEK4909haZXmM4nYJwvXQ5g2vuAwA5bFBoQ1tyMsrJndc+c50xO0/bJYVil37UbwqMk9hp3M2iYqzRZqUC1BxDiFpsi7zlkhudKRjZx+TlJeoA1Lk1qMvYPkehB574GUmoGDmwAABXtJREFUeNrt3fdbFEccx/E5BO7ogtzRpfcuVUBAkAiKgNKFAEpJ1NgTNTH23nvvJb333nvvvZf5P5KHR6V4udvv7sl8lsz7x7vneHg9u8vO7swejMlkMplMJpPJZDKZTCaTyf6/9fBuQ3Z2dkDm8bRtZQlLL7s87573dWvq/DF6g/wdxK1maNlWXO9etaz5pG4oF/t6uY3uK6uct3N8oz4sF/5q53aKKJkTl3pQB5bWBgO3m3PaqrXpPvCWNVO4kqqD+xb4gVM2hJi5sl49YvTFtlTUcqUlrky6A5nSuG+WYkt2USf0hnnsAa685Z7jgCmbpxAoPNEJ2NK8ikLhSwJxBzUr9mVSKClNdbAUf6e7SZul3BP2bHkm+UkSJSjjLtjN4rmdROHP1o2WHYwfj4OlfE6T8FldqBSvDCIlPhqVUrqESFn9FSrl8EQipTcdlTI2iEhJCAeVhL9HlHB31I1y1EyU7I+B3b+oG+UFVEnhNKJkxjuolI9SiBQXVEk4daN4b0Cl7KQeKYGoEl9vouQL2PH9u0TJ7V6oknXONEnKYdhjPm20nOfZSqLkVljJBKKkxhVV8vJcmuQl2EM+7BhNYrgIu3ttpEkeHg8rcSIeKFWwklii5EdYyfdEiRFWkkSU7IKVpLrRJMmwEhNR4jlqJNGjRoJ7xE8mHvFRsJLniJIFsJK3iJIkWMmjNIjbm7CSaJok4GNYyW00ycTvYCXf0iTBsBB2mibZCAsZE0GTfAkreaWaJrkJVjKTeDrZCyvJJ86g2F8kOSdLjGQpTfKBvZ/XyeeKgXgQb9b/YPvHdXF+XtDO9ThxKjvO3v3Ms6IOk0DiAT/Zzg0BcTNFp4jTJ/+59nZz//vnhEFciYfJVJsXnovCBN5YIe5cr1v9KfPj+998W+TZhLq2wNoywtA9CDPcRTRIopVxW8uV92KFQvwiaZLc605HPVffEnwLnzqhtWPY52uuXUnmCB50NRAXQw4ddA0sbN8k/NqknCZpGvzhqfb/No9ca4g7V9fAR48Mejlf/Ig+lwbpbrs2cB/8skU8ZGE7TfKz1bsxCM91WIg7V2f/p5KH3jSCuFwkLn7uvvDvZzqGvvYQBCTUQJPUMmYc9lIBxhX8LuLOVWFCnYAgriLaM2P4Kyhrbo9ybZlhluLkaoPUwNznejBeEwRoue1iTRCkCeBJWiBbdXw7eMi0Vg4QhCWoh3wIdV/bpB4yHQrCXFRDxmJBfN3UQu7EgrDfVDqqQ8Egs39VB9nP0OpQBymBg7hmqYKEwEGuu17S76TvaTWQZQC/uL+P3zjTloqqqMCOP3451ZTRosJR7jHiv/aZ3xvbTrTWGfPyQ37aXZlwflqPOcCZa61sxB3pnN/MHV/fiEOazfxGJGINp+XPGwDZIuLgPunicEfkbEFDw2AHQ24R9id3xyKHQioFnj2cHAkRuoZ+xSOOg8wUe0q/P8JBjhThT8m5O+bkeEj8OOvgM46AXEIY66b3aoc8gTFsz9O8f00AuQDxadAIaYO5lopJ1OJoR3pI2WhQDzkGdYHrsVs1pB7sWv3AcpWQWIaW5WlVEMAnrV3nqXDEQ35folewji5GbPfUaiIE98suCmiQxbAQlrOeAlnHgDuh/FZ2ZiGDLlbp7UdvBl5YsTJIEYPPtEkJpIDpoG8U7F9ReoAw/8/sQkqZPip90bbjHqabLDa/QukTpqPO6msW1EahtTp89NV6WyPpD8KBdi/UzIiWCkusQN5neuxcFvoyLcWtDcJepqW8hcXYy7QI7T00yLH9Nabj4gaGkp8yXRc2/SpkPdN5B66sdU5mus/Y/x9c3tA/hHnUgzwfpr2YiElMJpPJZDKZTCaTyWQymUwmk8lkMplMNir7B6zHY9BGpovVAAAAAElFTkSuQmCC'
var same = 'image://data:image/png;base64,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'

var chartData = {
	timelineData: ['2018', '2019', '2020', '2021'], // 变量名修改
	seriesData: [
		{
			xdata: ['批发零售', '制造业', '商务服务', '居民服务'],
			ydata: [3,4,5,6],
			status: [up, up, down, down]
		}, // 2018
		{
			xdata: ['批发零售', '制造业', '商务服务', '居民服务'],
			ydata: [13,24,15,26],
			status: [down, up, up, down]
		}, // 2019
		{
			xdata: ['批发零售', '制造业', '商务服务', '居民服务'],
			ydata: [3,4,5,6],
			status: [up, down, up, down]
		}, // 2020
		{
			xdata: ['批发零售', '制造业', '商务服务', '居民服务'],
			ydata: [33,24,35,56],
			status: [up, down, down, up]
		} // 2021
	]
}
var optionVal = chartData.seriesData.map((item, index) => {
  return {
    // title: {
    //   text: this.chartData.timelineData[index] + '年'
    // },
    xAxis: {
      data: item.xdata
    },
    tooltip: {},
    series: [
      {
        name: "",
        type: 'pictorialBar',
        symbol: function(data,params){
            return item.status[params.dataIndex]
        },
        symbolSize: [20, 30],
        symbolOffset: [0, -40],
        color:'orange',
        symbolPosition: 'end',
        label: {
            show: true,
            position: "top",
            formatter:  function(params){
                return item.ydata[params.dataIndex]
            },
            fontSize: 30,
            fontWeight: 'bold',
            color: '#34DCFF'
        },
        data: item.ydata
      },
      {
        type: 'bar',
        data: item.ydata,
        barWidth: 60
      }
    ]
  }
})
option = {
  baseOption: {
    timeline: {
      data: chartData.timelineData,
      axisType: 'category',
      autoPlay: true,
      playInterval: 1500,
    },
    title: {
      text: '',
      right: '2%',
      bottom: '8%',
      textStyle: {
        fontSize: 50,
        color: '#000'
      }
    },
    xAxis: {
      type: 'category'
    },
    yAxis: {
      type: 'value'
    }
  },
  options: optionVal
}

单饼图变动图

var json = {
    // 变量名修改
	timelineData: ['2018', '2019', '2020', '2021'],
	seriesData: [
		{
			name: '2018',
			value: [
				{ value: 1048, name: 'Search Engine' },
				{ value: 735, name: 'Direct' },
				{ value: 580, name: 'Email' },
				{ value: 484, name: 'Union Ads' },
				{ value: 300, name: 'Video Ads' }
			]
		},
		{
			name: '2019',
			value: [
				{ value: 10, name: 'Search Engine' },
				{ value: 20, name: 'Direct' },
				{ value: 30, name: 'Email' },
				{ value: 40, name: 'Union Ads' },
				{ value: 50, name: 'Video Ads' }
			]
		},
		{
			name: '2020',
			value: [
				{ value: 1048, name: 'Search Engine' },
				{ value: 735, name: 'Direct' },
				{ value: 580, name: 'Email' },
				{ value: 484, name: 'Union Ads' },
				{ value: 300, name: 'Video Ads' }
			]
		},
		{
			name: '2021',
			value: [
				{ value: 1048, name: 'Search Engine' },
				{ value: 735, name: 'Direct' },
				{ value: 580, name: 'Email' },
				{ value: 484, name: 'Union Ads' },
				{ value: 300, name: 'Video Ads' }
			]
		}
	]
}

在这里插入图片描述

单折线变动图

json = {
	timelineData: ['2018', '2019', '2020', '2021'] // 变量名修改
	data: [
		{
			xdata: ['批发零售', '制造业', '商务服务', '居民服务'],
			ydata: [3,4,5,6]
		}, // 2018
		{
			xdata: ['批发零售', '制造业', '商务服务', '居民服务'],
			ydata: [3,4,5,6]
		}, // 2019
		{
			xdata: ['批发零售', '制造业', '商务服务', '居民服务'],
			ydata: [3,4,5,6]
		}, // 2020
		{
			xdata: ['批发零售', '制造业', '商务服务', '居民服务'],
			ydata: [3,4,5,6]
		} // 2021
	]
}

多柱变动图/多条变动图

// 数据类型
var chartData = {
	timelineData: ['2018', '2019', '2020', '2021'], // 变量名修改
	seriesData: [
		{
			xdata: ['批发零售', '制造业', '商务服务', '居民服务'],
			ydata: [
                {
                    name: '指标1',
                    dataList: [3,4,5,6]
                },
                {
                    name: '指标2',
                    dataList: [3,4,5,6]
                },
            ]
		}, // 2018
		{
			xdata: ['批发零售', '制造业', '商务服务', '居民服务'],
			ydata: [
                {
                    name: '指标1',
                    dataList: [33,24,35,56]
                },
                {
                    name: '指标2',
                    dataList: [3,4,5,6]
                },
            ]
		}, // 2019
		{
			xdata: ['批发零售', '制造业', '商务服务', '居民服务'],
			ydata: [
                {
                    name: '指标1',
                    dataList: [33,24,35,56]
                },
                {
                    name: '指标2',
                    dataList: [3,4,5,6]
                },
            ]
		}, // 2020
		{
			xdata: ['批发零售', '制造业', '商务服务', '居民服务'],
			ydata: [
                {
                    name: '指标1',
                    dataList: [33,24,35,56]
                },
                {
                    name: '指标2',
                    dataList: [3,4,5,6]
                },
            ]
		} // 2021
	]
}


var optionVal = chartData.seriesData.map((item, index) => {
    return {
		xAxis: item.xdata,
		series: item.ydata.map((item1, index1) => {
			return {
				name: item1.name,
				type: 'bar',
				data: item1.dataList
			}
		})
	}
})
option = {
  baseOption: {
    timeline: {
      data: chartData.timelineData,
      axisType: 'category',
      autoPlay: true,
      playInterval: 1500,
    },
    title: {
      text: '',
      right: '2%',
      bottom: '8%',
      textStyle: {
        fontSize: 50,
        color: '#000'
      }
    },
    xAxis: {
      type: 'category'
    },
    yAxis: {
      type: 'value'
    }
  },
  options: optionVal
}

在这里插入图片描述

多折线变动图

// 数据类型
var chartData = {
	timelineData: ['2018', '2019', '2020', '2021'], // 变量名修改
	seriesData: [
		{
			xdata: ['批发零售', '制造业', '商务服务', '居民服务'],
			ydata: [
                {
                    name: '指标1',
                    dataList: [3,4,5,6]
                },
                {
                    name: '指标2',
                    dataList: [3,4,5,6]
                },
            ]
		}, // 2018
		{
			xdata: ['批发零售', '制造业', '商务服务', '居民服务'],
			ydata: [
                {
                    name: '指标1',
                    dataList: [33,24,35,56]
                },
                {
                    name: '指标2',
                    dataList: [3,4,5,6]
                },
            ]
		}, // 2019
		{
			xdata: ['批发零售', '制造业', '商务服务', '居民服务'],
			ydata: [
                {
                    name: '指标1',
                    dataList: [33,24,35,56]
                },
                {
                    name: '指标2',
                    dataList: [3,4,5,6]
                },
            ]
		}, // 2020
		{
			xdata: ['批发零售', '制造业', '商务服务', '居民服务'],
			ydata: [
                {
                    name: '指标1',
                    dataList: [33,24,35,56]
                },
                {
                    name: '指标2',
                    dataList: [3,4,5,6]
                },
            ]
		} // 2021
	]
}


var optionVal = chartData.seriesData.map((item, index) => {
    return {
		xAxis: item.xdata,
		series: item.ydata.map((item1, index1) => {
			return {
				name: item1.name,
				type: 'line',
				data: item1.dataList
			}
		})
	}
})
option = {
  baseOption: {
    timeline: {
      data: chartData.timeLindata,
      axisType: 'category',
      autoPlay: true,
      playInterval: 1500,
    },
    title: {
      text: '',
      right: '2%',
      bottom: '8%',
      textStyle: {
        fontSize: 50,
        color: '#000'
      }
    },
    xAxis: {
      type: 'category'
    },
    yAxis: {
      type: 'value'
    }
  },
  options: optionVal
}

在这里插入图片描述

双环变动图

var json = {
	timelineData: ['2018', '2019', '2020', '2021'], // 变量名修改
	seriesData: [
		{
			name: '2018',
			value: [
                {
                    name: '指标1',
                    data: [
                        { value: 1048, name: 'Search Engine' },
                        { value: 735, name: 'Direct' },
                        { value: 580, name: 'Email' },
                        { value: 484, name: 'Union Ads' },
                        { value: 300, name: 'Video Ads' }
                    ]
                },
                {
                    name: '指标2',
                    data: [
                        { value: 40, name: 'rose 1' },
                        { value: 38, name: 'rose 2' },
                        { value: 32, name: 'rose 3' },
                        { value: 30, name: 'rose 4' },
                        { value: 28, name: 'rose 5' },
                        { value: 26, name: 'rose 6' },
                        { value: 22, name: 'rose 7' },
                        { value: 18, name: 'rose 8' }
                    ]
                }
            ]
		},
		{
			name: '2019',
			value: [
                {
                    name: '指标1',
                    data: [
                        { value: 1048, name: 'Search Engine' },
                        { value: 735, name: 'Direct' },
                        { value: 580, name: 'Email' },
                        { value: 484, name: 'Union Ads' },
                        { value: 300, name: 'Video Ads' }
                    ]
                },
                {
                    name: '指标2',
                    data: [
                        { value: 40, name: 'rose 1' },
                        { value: 38, name: 'rose 2' },
                        { value: 32, name: 'rose 3' },
                        { value: 30, name: 'rose 4' },
                        { value: 28, name: 'rose 5' },
                        { value: 26, name: 'rose 6' },
                        { value: 22, name: 'rose 7' },
                        { value: 18, name: 'rose 8' }
                    ]
                }
            ]
		},
		{
			name: '2020',
			value: [
                {
                    name: '指标1',
                    data: [
                        { value: 1048, name: 'Search Engine' },
                        { value: 735, name: 'Direct' },
                        { value: 580, name: 'Email' },
                        { value: 484, name: 'Union Ads' },
                        { value: 300, name: 'Video Ads' }
                    ]
                },
                {
                    name: '指标2',
                    data: [
                        { value: 40, name: 'rose 1' },
                        { value: 38, name: 'rose 2' },
                        { value: 32, name: 'rose 3' },
                        { value: 30, name: 'rose 4' },
                        { value: 28, name: 'rose 5' },
                        { value: 26, name: 'rose 6' },
                        { value: 22, name: 'rose 7' },
                        { value: 18, name: 'rose 8' }
                    ]
                }
            ]
		},
		{
			name: '2021',
			value: [
                {
                    name: '指标1',
                    data: [
                        { value: 1048, name: 'Search Engine' },
                        { value: 735, name: 'Direct' },
                        { value: 580, name: 'Email' },
                        { value: 484, name: 'Union Ads' },
                        { value: 300, name: 'Video Ads' }
                    ]
                },
                {
                    name: '指标2',
                    data: [
                        { value: 40, name: 'rose 1' },
                        { value: 38, name: 'rose 2' },
                        { value: 32, name: 'rose 3' },
                        { value: 30, name: 'rose 4' },
                        { value: 28, name: 'rose 5' },
                        { value: 26, name: 'rose 6' },
                        { value: 22, name: 'rose 7' },
                        { value: 18, name: 'rose 8' }
                    ]
                }
            ]
		}
	]
}

在这里插入图片描述

fanxiang123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ECharts折线图渲染json格式数据（格式为数组）
前端视听
05-14 1966
ECharts折线图渲染json格式数据（json格式，为数组） 需要对数组进行循环取值，将取到的值分别赋值给x轴和y轴 json格式，data为数组 { "msg": "查询成功", "code": 1, "data": [{ "statTime": "2021-03", "noPatrolNum": 21 }, { "statTime": "2021-04", "noPatrolNum": 15 }] } demo <!DOCTYPE html> &
Echarts样式
wyw223的博客
05-22 161
Echarts样式 Echarts设置样式如下 &lt;div id="main" style="width: 250px;height:200px;"&gt;&lt;/div&gt;     &lt;script type="text/javascript"&gt;         var myChart = echarts.init(document.getEleme..
echarts数据格式
qq_41818857的博客
06-28 1539
方式一： 用这种方式的话，需要注意，如果data1中的数据多，data2中的数据少，可能会导致折线图乱连 var data1 = [["2021-6-1", 23], ["2021-6-2", 44], ["2021-6-3", 55], ["2021-6-4", 19]] var data2 = [["2021-6-1", 33], ["2021-6-2", 24], ["2021-6-3", 13], ["2021-6-4", 28]] series: [ { data: data1 }, {
echart各种显示数据的格式化
蜗蜗牛在路上的博客
05-16 5708
详情请看本链接：点击打开链接
使用官方提供的帮助也下载不了源码的解决方案
android大牛MrJing 活动中心
09-01 2032
Downloading the Source Tree Installing Repo Repo is a tool that makes it easier to work with Git in the context of Android. For more information about Repo, see Version Control. To install, initia
vue print.js打印支持Echarts图表操作
01-18
网上找的print.js做了修改，支持Echarts图表这里记录一下，不知道是哪家的代码了，我看都一样 这里是看到了两个源码 https://github.com/xyl66/vuePlugs_printjs/blob/master/print.js ...以下是我修改过的 ...
asp查询工资echarts图表显示.zip
06-17
在本项目中，我们主要探讨如何使用ASP进行数据库查询，并结合ECharts库生成动态的工资统计图表。ASP（Active Server Pages）是一种微软开发的服务器端脚本环境，用于创建动态网页或Web应用程序。ECharts则是一款由...
使用echarts绘制android图表
03-31
ECharts 是一个由百度开发的开源 JavaScript 图表库，它提供了丰富的可视化图表类型，如柱状图、折线图、饼图、散点图等，适用于网页数据可视化的各种需求。在 Android 开发中，我们可以借助 ECharts 的 Webview ...
echarts-doc
最新发布
01-26
1. **ECharts基本概念**：了解ECharts的基本结构，如图表类型、数据处理方式、图表配置项等，这些都是使用ECharts的前提。 2. **API详解**：ECharts提供了丰富的API接口，包括初始化图表、设置和获取选项、更新图表...
java-echarts封装
05-09
总结来说，"java-echarts封装"涉及到的关键技术点有：ECharts图表库的理解与应用、Java中的Gson库用于JSON序列化和反序列化、面向对象编程构造ECharts配置模型、前后端数据交互以及错误处理和性能优化。这样的封装...
个人博客定制 to 鼠标单击事件绑定
zhenndbc的博客
06-18 3万+
个人博客定制、css、js 特效、看板娘、鼠标事件
文件转换器
m0_58875099的博客
12-05 7801
在写网页的时候，有些手切欠的人会把某些图片给删了(比如我), 所以为了解决这个问题问题我写了一个文件转换器 文件转DataUrl
收藏网址
热门推荐
u011569805的专栏
11-05 86万+
It will be read and overwritten.      DO NOT EDIT! --> Bookmarks Bookmarks     书签栏             桌面支持中心         从 IE 中导入                     桌面支持中心             入职                    
正则表达式
Tang
01-24 380
正则表达式的引入 /* 正则表达式 验证qq号码是否符合规则 1.必须是5-10位 2.0不可以作为qq号的开头 public class RegexDemo01 { public static void main(String[] args) { Scanner input = new Scanner(System.in); System.out.println("请输入一个Q...
ECharts常用图表 饼图
黑马程序员官方博客
12-08 7632
选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可。另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我喔~，表示外半径为可视区尺寸（容器高宽中较小一项）的 20%南丁格尔图指的是每一个扇形的半径随着数据的大小而不同。饼图可以很好地帮助用户快速了解不同分类的数据的。选 'single'：数组的第一项是内半径，第二项是外半径。下一篇：ECharts。组成的字典所形成的数组。，分别表示单选还是多选。可以将饼图设置为圆环图。是一个空空如也的对象。：直接指定外半径值。
echarts纵坐标支持时间time
alisa_csdn的博客
04-27 2495
前段时间项目需要支持纵坐标时间类型，看了下echart官网，配置如下，支持时间及时间戳格式 option = { xAxis: { type: 'category', data: ['Mon', 'Tue', ] }, yAxis: { type: 'time', }, series: [ { // data: ['2011-03-06','2011-06-08'], // data: [1613788626000,1616207...
xfos.co d.php,PHP Helpdesk
weixin_30158793的博客
03-21 9525
Hi. This is the qmail-send program at emperor.meridianschools.org.I'm afraid I wasn't able to deliver your message to the following addresses.This is a permanent error; I've given up. Sorry it didn't ...
完整记录一则Oracle 11.2.0.4单实例打PSU补丁的过程
weixin_34186128的博客
12-04 6万+
本文记录了打PSU的全过程，意在体会数据库打PSU补丁的整个过程。 1.OPatch替换为最新版本2.数据库软件应用19121551补丁程序3.数据库应用补丁4.验证PSU补丁是否应用成功 1.OPatch替换为最新版本 [oracle@DB usr2]$ id uid=500(oracle) gid=500(oinstall) 组=500(oinstall),501(dba) 环境=...
Echarts 饼图基本用法
qq_50148250的博客
08-05 8970
Echarts 饼图基本用法
有没有像gitlub提交记录可视化的echarts
06-09
可以使用ECharts来实现Git提交记录的可视化。具体实现方法如下： 1. 首先，需要将Git提交记录导出为一个JSON文件，可以使用Git的命令行工具或者第三方工具来导出。例如，使用Git的命令行工具可以执行以下命令： ``` git log --pretty=format:'{%n "commit": "%H",%n "author": "%an <%ae>",%n "date": "%ad",%n "message": "%f"%n},' > log.json ``` 该命令将所有提交记录导出为一个JSON文件，并且每个提交记录都是一个JSON对象。 2. 接下来，需要使用ECharts来读取JSON文件，并将提交记录可视化为一个图表。可以使用ECharts的数据格式化功能来将JSON文件解析为ECharts所需的数据格式。例如，可以使用以下代码来读取JSON文件并解析为ECharts所需的数据格式： ``` $.getJSON("log.json", function (data) { var dateList = data.map(function (item) { return item.date; }); var commitList = data.map(function (item) { return item.commit.substring(0, 7); }); var chartData = data.map(function (item, index) { var color = 'lightgreen'; if (index % 2 === 1) { color = 'pink'; } return { value: [index, item.message, item.author, item.commit], itemStyle: { color: color } } }); var option = { tooltip: {}, title: [{ text: 'Git提交记录可视化', left: 'center' }], grid: [{ left: 50, right: 50, bottom: 10, top: 60, containLabel: true }], xAxis: [{ type: 'category', boundaryGap: false, data: dateList, axisLabel: { formatter: function (value) { return echarts.format.formatTime('yyyy-MM-dd', value); } }, splitLine: { show: true, lineStyle: { color: '#999', type: 'dashed' } }, axisLine: { lineStyle: { color: '#999' } } }], yAxis: [{ type: 'category', data: commitList, axisLine: { lineStyle: { color: '#999' } } }], series: [{ type: 'scatter', symbolSize: 20, data: chartData, animationDelay: function (idx) { return idx * 5; } }] }; var chart = echarts.init(document.getElementById('chart')); chart.setOption(option); }); ``` 该代码将JSON文件解析为一个ECharts图表，并且使用散点图来表示提交记录。每个提交记录都是一个散点，可以通过鼠标悬浮来查看提交信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值