Vue + Echarts + V-Charts Visualization

Just notes, please refer to the official documentation for more details.Copy the code

The introduction of

• Document Address:https://github.com/ecomfe/vue-echarts/blob/5.x/README.zh_CN.md
• npm install echarts vue-echarts

Bar chart 📊 bar

option = {
    grid: { / / position
        top: '30%'.left: '15%'.right: '15%',},title: { / / title
        text: 'Main Title'.subtext: 'Sub Title'.left: '10%'.top: '10%'.textStyle: { // Text style
            fontSize: 30.color: 'rgba(68, 189, 225, 1)'.fontWeight: 'bolder'.fontFamily: 'sans-serif'.fontStyle: 'normal',},subtextStyle: { // Subtitle text style
            fontSize: 20.color: 'rgba(150, 249, 243, 1)'.fontStyle: 'italic',},show: true,},tooltip: { // Prompt box component
        trigger: 'axis'.axisPointer: {
            type: 'shadow',}},legend: [ // sort by legend
        {
            top: '10%'.right: '10%'.data: ['Subsidy'],}, {top: '14%'.right: '10%'.itemWidth: 16.data: ['Over 100'.'90 to 99 '.'80-89 years old'].orient: 'horizontal'.// Default value: horizontal (vertical)
            padding: [1.1.1.1].align: 'left'.lineStyle: {},textStyle: {
                color: 'rgba(68, 189, 225, 1)',}},],xAxis: { // X-axis attributes
        type: 'category'.name:' './ / name
        data: ['Peace Community'.'Sam Wa Yao Community'.Wing on Community.'Yizhou Community'.'Jiaozi Park Community'.Crescent Lake Community].axisLabel: { // Set the calibration labels for the axes
            rotate: 45,},axisLine: {
            show: true.lineStyle: {
                color: '##E9EAEB',}}},yAxis: [{// The first Y-axis
            type: 'value'.name: 'people'.axisLine: {
                show: true.lineStyle: {
                    color: '#E9EAEB',}},axisTick: {
                show: true,},splitLine: { // Whether to display the separation lines of the coordinate axes in the grid area
                show: true.lineStyle: {
                    type: 'dashed'.// The type of the line 'solid', 'dotted', 'upward'}},axisLabel: { // Set the calibration labels for the axes.
                color: '# 828282'.fontSize: 12,}}, {// Second Y-axis
            type: 'value'.name: '万'.axisLine: {
                show: true.lineStyle: {
                    color: '#E9EAEB',}},axisTick: {
                show: true,},splitLine: {
                show: false,},axisLabel: {
                color: '# 828282'.fontSize: 12,}},],color: ["#485AE9"."#EE5B56"."#F4AC56"].series: [{name: 'Subsidy'.type: 'line'.yAxisIndex: 1.color: '#EF8052'.data: [1210.1523.1923.1123.1244.5145].label: { // The text label on the graph can be used to describe some data information of the graph, such as value, name, etc
                show: true.rich: {}, // In rich, you can customize rich text styles}, {},name: 'Over 100'.type: 'bar'.stack: 'age'.// Stack data. Stack values configured in the same series on the same category axis can be stacked.
            barWidth: '50%'.data: [3210.3132.1301.3314.1910.3310],}, {name: '90 to 99 '.type: 'bar'.stack: 'age'.barWidth: '50%'.data: [1120.1132.101.1314.910.230],}, {name: '80-89 years old'.type: 'bar'.stack: 'age'.barWidth: '50%'.data: [2210.1821.191.234.2190.330],},]};Copy the code

The line chart 📈

xAxis: {
          type: 'category'.data: ['Mon'.'Tue'.'Wed'.'Thu'.'Fri'.'Sat'.'Sun'].axisLabel: { // Set the calibration labels for the axes
            rotate: 45.color: '#fff',},axisLine: { // Axis axis style
            show: true.lineStyle: {
              color: '# 507058',}},axisTick: {
            show: false,}},yAxis: {
          type: 'value'.axisLine: {
            show: false,},axisLabel: {
            show: false,},splitLine: {
            show: true.lineStyle: {
              color: '# 507058'.type: 'dashed',}}},series: [{symbol: 'emptyCircle'.showSymbol: true.symbolSize: 5.markPoint: { // Max + style
              data: [{symbol: 'emptyCircle'.symbolSize: 8.type: 'max'.name: 'maximum'.label: {
                    show: true.color: '#FBA8DA'.fontWeight: 'bolder'.position: 'top'.distance: 10,},itemStyle: {
                    color: '#FBA8DA'.borderColor: '#FBA8DA'.borderType: 'solid'.borderWidth: 5,}}, {type: 'min'.name: 'minimum'.symbol: 'emptyCircle'.symbolSize: 8.label: {
                    show: true.color: '#FAE494'.fontWeight: 'bolder'.position: 'top'.distance: 10,},itemStyle: {
                    color: '#FAE494'.borderColor: '#FAE494'.borderType: 'solid'.borderWidth: 5,}},],label: { textStyle: { color: '#fff'}},itemStyle: { color: 'transparent'}},color: '#A8FBC0'.data: [150.230.224.218.135.147.260].type: 'line'],},Copy the code

The pie chart 🫓 pie

• Configuration of selected mode:selectedMode
• Text labels on pie charts:label
• Label margins:label.edgeDistance
• Alignment of labels:label.alignTo
• Visual guide line configuration for labels:labelLine
• Unified layout of labels:labelLayout
• Graphic styles:itemStyle
• Sectors and label styles for highlighted states:emphasis
• Animation effect:animation

options: {
         tooltip: {
           trigger: 'item',},color: ['#A8FBC0'.'#FAE494'.'#C4C4C4'].series: [{label: { // The text label on the pie chart, which can be used to describe some data information of the graph, such as value, name, etc
               show: true.position: 'outside'.formatter: '{b}, {d} %',},name: 'Access source'.type: 'pie'.radius: '50%'.data: [{value: 580.name: 'the bulls' },
               { value: 484.name: 'cow' },
               { value: 800.name: '牛犊'},].labelLine: {
               length2: 40,},emphasis: {
               itemStyle: {
                 shadowBlur: 10.shadowOffsetX: 0.shadowColor: 'rgba (0, 0, 0, 0.5)',},},},],},Copy the code

// Reach the border
labelLayout: (params) = > {
     const isLeft = params.labelRect.x < myChart.getWidth() / 2
     const points = params.labelLinePoints
     points[2] [0] = isLeft ? params.labelRect.x :params.labelRect.x + params.labelRect.widthreturn {
       labelLinePoints: points
     }
   }
Copy the code

Half a circle

    title: {
        / / title
        text: 'Main Title'.subtext: 'Sub Title'.left: 'center'.top: '44%'.textStyle: {
            // Text style
            fontSize: 30.color: 'rgba(68, 189, 225, 1)'.fontWeight: 'bolder'.fontFamily: 'sans-serif'.fontStyle: 'normal',},subtextStyle: {
            // Subtitle text style
            fontSize: 20.color: 'rgba(150, 249, 243, 1)'.fontStyle: 'italic',},show: true,},polar: {},
    angleAxis: {
        axisLine: {
            show: false,},axisLabel: {
            show: false,},splitLine: {
            show: false,},axisTick: {
            show: false,},min: 0.max: 200.boundaryGap: ['0'.'100'].startAngle: 180,},radiusAxis: {
        type: 'category'.axisLine: {
            show: false,},axisTick: {
            show: false,},axisLabel: {
            show: false,}},series: [{type: 'bar'.stack: 'total'.name: 'Urban Management Services'.data: [null.null.null.50].coordinateSystem: 'polar'.value: 819.color: '#F45B80'}, {type: 'bar'.stack: 'total'.name: 'Union services'.data: [null.null.null.10].coordinateSystem: 'polar'.value: 482.color: '#FFA8A7'}, {type: 'bar'.stack: 'total'.name: 'Food Business License'.data: [null.null.null.10].coordinateSystem: 'polar'.value: 365.color: '#1B3478'}, {type: 'bar'.stack: 'total'.name: 'Employment Services'.data: [null.null.null.10].coordinateSystem: 'polar'.value: 250.color: '#3677FF'}, {type: 'bar'.stack: 'total'.name: 'EMS mail'.data: [null.null.null.10].coordinateSystem: 'polar'.value: 25.color: '#FEB446'}, {type: 'bar'.stack: 'total'.name: League Organisation Service.data: [null.null.null.10].coordinateSystem: 'polar'.value: 16.color: '#64C0DE'],},tooltip: {
        show: true.trigger: 'item'.borderColor: '#fff',},grid: {
        left: 0.top: 0.bottom: 0.right: 0,},Copy the code